viniBaxter-desk_front 0.5.0 → 12.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (90) hide show
  1. checksums.yaml +4 -4
  2. data/.DS_Store +0 -0
  3. data/app/assets/images/desk_front/sidebar-cover.jpg +0 -0
  4. data/lib/viniBaxter/desk_front/version.rb +1 -1
  5. data/lib/viniBaxter/sass/desk_front.scss +3 -3
  6. data/lib/viniBaxter/sass/desk_front/administrate/base/_forms.scss +15 -1
  7. data/lib/viniBaxter/sass/desk_front/administrate/base/_lists.scss +4 -4
  8. data/lib/viniBaxter/sass/desk_front/administrate/base/_tables.scss +11 -11
  9. data/lib/viniBaxter/sass/desk_front/administrate/base/_typography.scss +49 -44
  10. data/lib/viniBaxter/sass/desk_front/administrate/components/_buttons.scss +51 -51
  11. data/lib/viniBaxter/sass/desk_front/administrate/components/_cells.scss +2 -1
  12. data/lib/viniBaxter/sass/desk_front/administrate/components/_form-actions.scss +3 -3
  13. data/lib/viniBaxter/sass/desk_front/administrate/index.scss +1 -1
  14. data/lib/viniBaxter/sass/desk_front/administrate/library/_customSelectize.scss +3 -0
  15. data/lib/viniBaxter/sass/desk_front/beckyBaxter/_index.scss +74 -76
  16. data/lib/viniBaxter/sass/desk_front/beckyBaxter/custom/_buttons.scss +195 -162
  17. data/lib/viniBaxter/sass/desk_front/beckyBaxter/custom/_dropdown.scss +260 -258
  18. data/lib/viniBaxter/sass/desk_front/beckyBaxter/custom/_navbar.scss +472 -473
  19. data/lib/viniBaxter/sass/desk_front/beckyBaxter/custom/mixins/_buttons.scss +357 -343
  20. data/lib/viniBaxter/sass/desk_front/beckyBaxter/custom/vendor/_plugin-bootstrap-select.scss +129 -69
  21. data/lib/viniBaxter/sass/desk_front/beckyBaxter/custom/vendor/_plugin-datetimepicker.scss +228 -159
  22. data/lib/viniBaxter/sass/desk_front/beckyBaxter/custom/vendor/_plugin-new-bootstrap-select.scss +534 -0
  23. data/lib/viniBaxter/sass/desk_front/beckyBaxter/mixins/_buttons.scss +341 -327
  24. data/lib/viniBaxter/sass/desk_front/dashkit/_dropdowns.scss +8 -14
  25. data/lib/viniBaxter/sass/desk_front/landing/_landing.scss +5 -0
  26. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_alert.scss +18 -0
  27. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_aos.scss +32 -0
  28. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_avatar.scss +192 -0
  29. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_badge.scss +95 -0
  30. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_breadcrumb.scss +35 -0
  31. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_button-group.scss +0 -0
  32. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_buttons.scss +115 -0
  33. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_card.scss +219 -0
  34. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_carousel.scss +0 -0
  35. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_close.scss +11 -0
  36. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_code.scss +0 -0
  37. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_collapse.scss +15 -0
  38. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_custom-forms.scss +65 -0
  39. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_device.scss +103 -0
  40. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_dropdown.scss +106 -0
  41. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_fancybox.scss +14 -0
  42. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_feather.scss +1093 -0
  43. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_flickity.scss +112 -0
  44. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_footer.scss +10 -0
  45. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_forms.scss +92 -0
  46. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_functions.scss +14 -0
  47. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_grid.scss +9 -0
  48. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_highlight.scss +8 -0
  49. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_icon.scss +56 -0
  50. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_images.scss +32 -0
  51. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_input-group.scss +0 -0
  52. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_jumbotron.scss +0 -0
  53. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_list-group.scss +22 -0
  54. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_list.scss +27 -0
  55. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_media.scss +0 -0
  56. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_mixins.scss +8 -0
  57. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_modal.scss +21 -0
  58. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_nav.scss +0 -0
  59. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_navbar.scss +377 -0
  60. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_pagination.scss +34 -0
  61. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_popover.scss +15 -0
  62. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_print.scss +0 -0
  63. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_progress.scss +0 -0
  64. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_reboot.scss +17 -0
  65. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_root.scss +0 -0
  66. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_screenshot.scss +9 -0
  67. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_section.scss +19 -0
  68. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_shapes.scss +178 -0
  69. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_sidenav.scss +28 -0
  70. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_tables.scss +23 -0
  71. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_theme.scss +57 -0
  72. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_tooltip.scss +0 -0
  73. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_transitions.scss +0 -0
  74. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_type.scss +169 -0
  75. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/_utilities.scss +15 -0
  76. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/mixins/_badge.scss +16 -0
  77. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/mixins/_buttons.scss +19 -0
  78. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/mixins/_overlay.scss +24 -0
  79. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/utilities/_background.scss +54 -0
  80. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/utilities/_borders.scss +76 -0
  81. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/utilities/_images.scss +35 -0
  82. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/utilities/_lift.scss +18 -0
  83. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/utilities/_overlay.scss +49 -0
  84. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/utilities/_position.scss +41 -0
  85. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/utilities/_shadows.scss +24 -0
  86. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/utilities/_sizing.scss +72 -0
  87. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/utilities/_type.scss +54 -0
  88. data/lib/viniBaxter/sass/desk_front/landing/spa_landing/theme/utilities/_visibility.scss +12 -0
  89. metadata +67 -3
  90. data/app/assets/images/desk_front/sidebar-cover-old.jpg +0 -0
@@ -0,0 +1,112 @@
1
+ //
2
+ // flickity.scss
3
+ // Library overrides
4
+ //
5
+
6
+ // Controls
7
+
8
+ .flickity-button {
9
+ display: flex;
10
+ align-items: center;
11
+ justify-content: center;
12
+ width: $input-height;
13
+ height: $input-height;
14
+ background-color: $primary;
15
+ box-shadow: $box-shadow-light;
16
+ color: $white;
17
+
18
+ &::before, &::after {
19
+ font-family: "Feather";
20
+ }
21
+
22
+ @include hover-focus {
23
+ background-color: $primary;
24
+ box-shadow: $box-shadow;
25
+ }
26
+ }
27
+
28
+ .flickity-button.previous {
29
+ left: 0;
30
+ transform: translate(calc(-50% + #{$grid-gutter-width / 4}), -50%);
31
+
32
+ @include media-breakpoint-up(md) {
33
+ transform: translate(-50%, -50%);
34
+ }
35
+
36
+ &::before {
37
+ content: "\e910";
38
+ }
39
+ }
40
+
41
+ .flickity-button.next {
42
+ right: 0;
43
+ transform: translate(calc(50% - #{$grid-gutter-width / 4}), -50%);
44
+
45
+ @include media-breakpoint-up(md) {
46
+ transform: translate(50%, -50%);
47
+ }
48
+
49
+ &::before {
50
+ content: "\e912";
51
+ }
52
+ }
53
+
54
+ .flickity-button-icon {
55
+ display: none;
56
+ }
57
+
58
+
59
+ // Button white
60
+
61
+ .flickity-button-white .flickity-button {
62
+ background-color: $white;
63
+ color: $primary;
64
+ }
65
+
66
+
67
+ // Button bottom
68
+
69
+ .flickity-button-bottom .flickity-button {
70
+ top: auto;
71
+ bottom: 1.5rem;
72
+ transform: none;
73
+ }
74
+
75
+ .flickity-button-bottom .flickity-button.previous {
76
+ left: auto;
77
+ right: 6.375rem;
78
+ }
79
+
80
+ .flickity-button-bottom .flickity-button.next {
81
+ left: auto;
82
+ right: 2.5rem;
83
+ }
84
+
85
+
86
+ // Button inset
87
+
88
+ .flickity-button-inset .flickity-button {
89
+ transform: translateY(-50%);
90
+ }
91
+
92
+ .flickity-button-inset .flickity-button.previous {
93
+ left: 1.5rem;
94
+ }
95
+
96
+ .flickity-button-inset .flickity-button.next {
97
+ right: 1.5rem;
98
+ }
99
+
100
+
101
+ // Viewport
102
+
103
+ .flickity-viewport-visible .flickity-viewport {
104
+ overflow: visible;
105
+ }
106
+
107
+
108
+ // Adaptive height
109
+
110
+ [data-flickity*='"adaptiveHeight": true'] .flickity-viewport {
111
+ transition: all .5s ease; // Make the transition match the rough duration of flicking between items
112
+ }
@@ -0,0 +1,10 @@
1
+ //
2
+ // footer.scss
3
+ // Theme component
4
+ //
5
+
6
+ // Brand image
7
+
8
+ .bg-dark .footer-brand {
9
+ filter: brightness(0) invert(1);
10
+ }
@@ -0,0 +1,92 @@
1
+ //
2
+ // forms.scss
3
+ // Extended from Boostrap
4
+ //
5
+
6
+ // Form control flush
7
+
8
+ .form-control-flush {
9
+ padding-left: 0;
10
+ padding-right: 0;
11
+ border-top-width: 0;
12
+ border-right-width: 0;
13
+ border-left-width: 0;
14
+ border-radius: 0;
15
+ }
16
+
17
+
18
+ // Custom file input
19
+
20
+ .custom-file-label::after {
21
+ font-weight: $font-weight-bold;
22
+ }
23
+
24
+
25
+ // Floating label
26
+ //
27
+ // Works for base size only
28
+
29
+ .form-label-group {
30
+ position: relative;
31
+ margin-bottom: $form-group-margin-bottom;
32
+ }
33
+
34
+ .form-label-group > label {
35
+ position: absolute;
36
+ top: 0; left: 0;
37
+ width: 100%; height: $input-height;
38
+ padding: $input-padding-y $input-padding-x;
39
+ margin-bottom: 0;
40
+ line-height: $input-line-height;
41
+ font-size: $input-font-size;
42
+ color: $input-placeholder-color;
43
+ pointer-events: none;
44
+ cursor: text;
45
+ transition: $transition-base;
46
+ }
47
+
48
+ .form-label-group > .form-control-flush ~ label {
49
+ padding-left: 0;
50
+ padding-right: 0;
51
+ }
52
+
53
+ .form-label-group > .form-control::placeholder {
54
+ color: transparent;
55
+ }
56
+
57
+ .form-label-group > .form-control:not(:placeholder-shown) {
58
+ padding-top: $input-padding-y * 1.5;
59
+ padding-bottom: $input-padding-y * .5;
60
+ }
61
+
62
+ .form-label-group > .form-control:not(:placeholder-shown) ~ label {
63
+ padding-top: ((($input-padding-y * 1.5) - ($font-size-xs * $input-line-height)) / 2);
64
+ padding-bottom: ((($input-padding-y * 1.5) - ($font-size-xs * $input-line-height)) / 2);
65
+ font-size: $font-size-xs;
66
+ }
67
+
68
+ // Fallback for Edge
69
+
70
+ @supports (-ms-ime-align: auto) {
71
+
72
+ .form-label-group > label {
73
+ display: none;
74
+ }
75
+
76
+ .form-label-group .form-control::placeholder {
77
+ color: $input-placeholder-color;
78
+ }
79
+ }
80
+
81
+ // Fallback for IE
82
+
83
+ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
84
+
85
+ .form-label-group > label {
86
+ display: none;
87
+ }
88
+
89
+ .form-label-group .form-control::placeholder {
90
+ color: $input-placeholder-color;
91
+ }
92
+ }
@@ -0,0 +1,14 @@
1
+ // =========
2
+ // Functions
3
+ // =========
4
+
5
+ // Colors
6
+ // ======
7
+
8
+ @function tint($color, $percentage) {
9
+ @return mix(white, $color, $percentage);
10
+ }
11
+
12
+ @function shade($color, $percentage) {
13
+ @return mix(black, $color, $percentage);
14
+ }
@@ -0,0 +1,9 @@
1
+ //
2
+ // grid.scsss
3
+ // Extended from Bootstrap
4
+ //
5
+
6
+ .container, .container-fluid {
7
+ position: relative;
8
+ z-index: 1;
9
+ }
@@ -0,0 +1,8 @@
1
+ //
2
+ // highlight.js
3
+ // Theme component
4
+ //
5
+
6
+ .hljs {
7
+ background-color: transparent;
8
+ }
@@ -0,0 +1,56 @@
1
+ //
2
+ // icon.scss
3
+ // Theme component
4
+ //
5
+
6
+ .icon>svg {
7
+ width: $icon-size-base;
8
+ height: $icon-size-base;
9
+ }
10
+
11
+ .icon>img {
12
+ width: $icon-size-base;
13
+ height: $icon-size-base;
14
+ }
15
+
16
+ // Use "text-" utilities to fill svg icons
17
+ .icon[class*="text-"]>svg [fill]:not([fill="none"]) {
18
+ fill: currentColor !important;
19
+ }
20
+
21
+ // Sizing
22
+
23
+ .icon-xs>svg {
24
+ width: $icon-size-xs;
25
+ height: $icon-size-xs;
26
+ }
27
+
28
+ .icon-sm>svg {
29
+ width: $icon-size-sm;
30
+ height: $icon-size-sm;
31
+ }
32
+
33
+ .icon-lg>svg {
34
+ width: $icon-size-lg;
35
+ height: $icon-size-lg;
36
+ }
37
+
38
+ .icon-xl>svg {
39
+ width: $icon-size-xl;
40
+ height: $icon-size-xl;
41
+ }
42
+
43
+ // Circle
44
+
45
+ .icon-circle {
46
+ display: inline-flex;
47
+ align-items: center;
48
+ justify-content: center;
49
+ width: $icon-circle-size;
50
+ height: $icon-circle-size;
51
+ border-radius: 50%;
52
+
53
+ >.fe {
54
+ font-size: $icon-circle-font-size;
55
+ }
56
+ }
@@ -0,0 +1,32 @@
1
+ //
2
+ // images.scss
3
+ // Extended from Bootstrap
4
+ //
5
+
6
+ // Image cover
7
+ //
8
+ // Spans the whole with of the viewport
9
+
10
+ .img-cover {
11
+ width: 100vw;
12
+ height: auto;
13
+ margin-left: calc(50% - 50vw);
14
+ }
15
+
16
+ // Extending .img-fluid class to support nested images
17
+
18
+ .img-fluid > img,
19
+ .img-fluid > svg {
20
+ max-width: inherit;
21
+ height: inherit;
22
+ }
23
+
24
+ // Figure
25
+
26
+ .figure {
27
+ display: block;
28
+ }
29
+
30
+ .figure-img {
31
+ margin-bottom: $spacer;
32
+ }
@@ -0,0 +1,22 @@
1
+ //
2
+ // list-group.scss
3
+ // Extended from Bootstrap
4
+ //
5
+
6
+ .list-group-flush {
7
+
8
+ .list-group-item {
9
+ padding-left: 0;
10
+ padding-right: 0;
11
+
12
+ &:first-child {
13
+ padding-top: 0 !important;
14
+ border-top: 0;
15
+ }
16
+
17
+ &:last-child {
18
+ padding-bottom: 0 !important;
19
+ border-bottom: 0;
20
+ }
21
+ }
22
+ }
@@ -0,0 +1,27 @@
1
+ //
2
+ // list.scss
3
+ // Theme component
4
+ //
5
+
6
+ .list {
7
+ margin-bottom: 0;
8
+ padding-left: 0;
9
+ list-style-type: none;
10
+ }
11
+
12
+ .list-item + .list-item {
13
+ margin-top: $list-item-spacing-y;
14
+ }
15
+
16
+ .list-link {
17
+ display: flex;
18
+ flex-wrap: nowrap;
19
+ align-items: center;
20
+ font-size: $list-link-font-size;
21
+ color: $list-link-color;
22
+
23
+ @include hover-focus {
24
+ text-decoration: none;
25
+ color: $list-link-hover-color;
26
+ }
27
+ }
@@ -0,0 +1,8 @@
1
+ //
2
+ // mixins.scss
3
+ // Extended from Bootstrap
4
+ //
5
+
6
+ @import "mixins/badge";
7
+ @import "mixins/buttons";
8
+ @import "mixins/overlay";
@@ -0,0 +1,21 @@
1
+ //
2
+ // modals.scss
3
+ // Extended from Bootstrap
4
+ //
5
+
6
+ .modal-open {
7
+ padding-right: 0 !important; // additional padding is not required as we have overflow-x: hidden on the root element
8
+ }
9
+
10
+ .modal-open .navbar {
11
+ padding-right: $navbar-padding-x !important;
12
+ }
13
+
14
+
15
+ // Close
16
+
17
+ .modal-close {
18
+ position: absolute;
19
+ top: 1.5rem; right: 1.5rem;
20
+ z-index: $zindex-dropdown;
21
+ }
@@ -0,0 +1,377 @@
1
+ //
2
+ // navbar.scss
3
+ // Extended from Bootstrap
4
+ //
5
+
6
+ .navbar {
7
+ transition: $transition-base;
8
+ transition-property: background-color, color;
9
+ z-index: $zindex-fixed;
10
+
11
+ &.blured {
12
+ backdrop-filter: saturate(180%) blur(20px);
13
+ }
14
+ }
15
+
16
+ // Dark version
17
+
18
+ .navbar-dark {
19
+
20
+ @include media-breakpoint-down(md) {
21
+
22
+ .navbar-nav .nav-item .nav-link {
23
+ color: $navbar-light-color;
24
+
25
+ &:hover,
26
+ &:focus {
27
+ color: $navbar-light-hover-color;
28
+ }
29
+ }
30
+
31
+ .navbar-nav .nav-item.active .nav-link,
32
+ .navbar-nav .nav-item .nav-link.active {
33
+ color: $navbar-light-active-color;
34
+ }
35
+
36
+ .navbar-collapse .navbar-toggler {
37
+ color: $navbar-light-color;
38
+ }
39
+ }
40
+ }
41
+
42
+ // Contaner
43
+
44
+ .navbar>.container,
45
+ .navbar>.container-fluid {
46
+ padding-left: $grid-gutter-width / 2 !important;
47
+ padding-right: $grid-gutter-width / 2 !important;
48
+ }
49
+
50
+ // Brand
51
+
52
+ .navbar-brand {
53
+ font-weight: $navbar-brand-font-weight;
54
+ }
55
+
56
+ .navbar-brand-img {
57
+ max-height: $navbar-brand-height;
58
+ width: auto;
59
+ }
60
+
61
+ .navbar-dark .navbar-brand {
62
+ filter: brightness(0) invert(1);
63
+ }
64
+
65
+ // change nav links and logo color if shouldStayTransparent class
66
+ .navbar-dark.shouldStayTransparent {
67
+ .navbar-nav .nav-link {
68
+ filter: brightness(0.1) invert(1);
69
+ }
70
+
71
+ .navbar-brand {
72
+ filter: brightness(1) invert(1);
73
+ }
74
+ }
75
+
76
+ // Button
77
+
78
+ .navbar-btn {
79
+
80
+ @include media-breakpoint-down(md) {
81
+ width: 100%;
82
+ padding: $btn-padding-y $btn-padding-x;
83
+ border-top-left-radius: 0;
84
+ border-top-right-radius: 0;
85
+ font-size: $btn-font-size;
86
+ }
87
+ }
88
+
89
+ // Navigation
90
+
91
+ .navbar-nav .nav-link {
92
+ font-weight: $navbar-nav-link-font-weight;
93
+
94
+ @include hover-focus {
95
+ outline: none;
96
+ }
97
+ }
98
+
99
+ // Boxed layout
100
+
101
+ .navbar-dark.fixed-top>.container {
102
+ position: relative;
103
+
104
+ &::after {
105
+ content: "";
106
+ position: absolute;
107
+ right: 0;
108
+ bottom: -$navbar-padding-y;
109
+ left: 0;
110
+ border-top: $border-width solid fade-out($white, .8);
111
+ }
112
+ }
113
+
114
+ // Collapse
115
+
116
+ @include media-breakpoint-down(md) {
117
+
118
+ .navbar-collapse {
119
+ position: fixed;
120
+ top: $spacer;
121
+ right: $spacer;
122
+ left: $spacer;
123
+ height: auto !important;
124
+ max-height: calc(100vh - #{$spacer * 2});
125
+ background-color: $dropdown-bg;
126
+ border-radius: $dropdown-border-radius;
127
+ box-shadow: $box-shadow-dark-lg;
128
+ overflow-y: scroll; // This has to be scroll for iOS bounce scroll
129
+ -webkit-overflow-scrolling: touch;
130
+ }
131
+
132
+ // Animation
133
+
134
+ .navbar-collapse.show,
135
+ .navbar-collapse.collapsing {
136
+ transition: $transition-base;
137
+ transition-property: opacity, transform, -webkit-transform;
138
+ transform-origin: top right;
139
+ }
140
+
141
+ .navbar-collapse.show {
142
+ opacity: 1;
143
+ transform: scale(1);
144
+ }
145
+
146
+ .navbar-collapse.collapsing {
147
+ opacity: 0;
148
+ transform: scale(.9);
149
+ }
150
+
151
+ }
152
+
153
+ // Toggler
154
+
155
+ .navbar-collapse .navbar-toggler {
156
+ position: absolute;
157
+ top: $spacer;
158
+ right: $spacer;
159
+ z-index: 1;
160
+
161
+ @include media-breakpoint-up(lg) {
162
+ display: none;
163
+ }
164
+ }
165
+
166
+ // Navigation
167
+
168
+ .navbar-nav .nav-item {
169
+
170
+ @include media-breakpoint-down(md) {
171
+ padding: $navbar-nav-item-spacing;
172
+
173
+ +.nav-item {
174
+ border-top: $border-width solid $gray-200;
175
+ }
176
+ }
177
+ }
178
+
179
+ .navbar-nav .nav-link {
180
+
181
+ @include media-breakpoint-down(md) {
182
+ padding-top: 0;
183
+ padding-bottom: 0;
184
+ }
185
+ }
186
+
187
+ // Dropdown menu
188
+
189
+ .navbar-nav .dropdown-menu {
190
+ box-shadow: none;
191
+
192
+ @include media-breakpoint-down(md) {
193
+ min-width: 0;
194
+ padding: 0;
195
+ }
196
+
197
+ @include media-breakpoint-up(lg) {
198
+ box-shadow: $box-shadow-dark-lg;
199
+ }
200
+ }
201
+
202
+ .navbar-nav .dropdown>.dropdown-menu {
203
+ display: block !important;
204
+ }
205
+
206
+ .navbar-nav .dropright>.dropdown-menu {
207
+
208
+ @include media-breakpoint-down(md) {
209
+ padding-top: $spacer;
210
+ padding-bottom: $spacer;
211
+ padding-left: $spacer / 2;
212
+ }
213
+ }
214
+
215
+ // Dropdown item
216
+
217
+ .navbar-nav .dropdown-item,
218
+ .navbar-nav .dropdown-header {
219
+
220
+ @include media-breakpoint-down(md) {
221
+ margin-left: 0;
222
+ margin-right: 0;
223
+ padding-left: 0;
224
+ padding-right: 0;
225
+ }
226
+ }
227
+
228
+ // Dropdown toggle
229
+
230
+ .navbar-nav .dropdown>.dropdown-toggle {
231
+
232
+ &::after {
233
+ display: none;
234
+ }
235
+
236
+ @include media-breakpoint-down(md) {
237
+ margin-bottom: $navbar-dropdown-toggle-margin-bottom;
238
+ pointer-events: none;
239
+ }
240
+ }
241
+
242
+ .navbar-nav .dropright>.dropdown-toggle {
243
+ display: flex;
244
+
245
+ &::after {
246
+ margin-left: auto;
247
+ }
248
+
249
+ @include media-breakpoint-down(md) {
250
+
251
+ &::after {
252
+ content: "\e92e";
253
+ }
254
+
255
+ &[aria-expanded="true"]::after {
256
+ transform-origin: center center;
257
+ transform: rotate(180deg);
258
+ }
259
+ }
260
+ }
261
+
262
+ // Dropdown image
263
+
264
+ .navbar-nav .dropdown-img-left {
265
+ height: 100%;
266
+ display: none;
267
+ flex-direction: column;
268
+ justify-content: center;
269
+ align-items: center;
270
+ padding: $dropdown-padding-y $dropdown-padding-x;
271
+ background: no-repeat center center / cover;
272
+ border-top-left-radius: $border-radius;
273
+ border-bottom-left-radius: $border-radius;
274
+
275
+ @include media-breakpoint-up(lg) {
276
+ display: flex;
277
+ }
278
+
279
+ // Overlay
280
+
281
+ &::before {
282
+ content: "";
283
+ position: absolute;
284
+ top: 0;
285
+ right: 0;
286
+ bottom: 0;
287
+ left: 0;
288
+ background-color: fade-out($primary, .2);
289
+ border-radius: inherit;
290
+ }
291
+
292
+ // Content
293
+
294
+ * {
295
+ position: relative;
296
+ }
297
+ }
298
+
299
+ .navbar-nav .dropdown-menu-lg .dropdown-img-left,
300
+ .navbar-nav .dropdown-menu-xl .dropdown-img-left {
301
+
302
+ @include media-breakpoint-up(lg) {
303
+ padding: $dropdown-padding-y-lg $dropdown-padding-x-lg;
304
+ }
305
+ }
306
+
307
+ // Dropdown body
308
+
309
+ .navbar-nav .dropdown-body {
310
+
311
+ @include media-breakpoint-up(lg) {
312
+ padding: $dropdown-padding-y $dropdown-padding-x;
313
+ }
314
+ }
315
+
316
+ .navbar-nav .dropdown-menu-lg .dropdown-body,
317
+ .navbar-nav .dropdown-menu-xl .dropdown-body {
318
+
319
+ @include media-breakpoint-up(lg) {
320
+ padding: $dropdown-padding-y-lg $dropdown-padding-x-lg;
321
+ }
322
+ }
323
+
324
+ // Dropdown list group
325
+
326
+ .navbar-nav .dropdown-menu .list-group-item {
327
+ display: flex;
328
+ align-items: center;
329
+ padding-top: $spacer;
330
+ padding-bottom: $spacer;
331
+ color: inherit;
332
+
333
+ @include hover {
334
+ text-decoration: none;
335
+ }
336
+ }
337
+
338
+ // Toggle dropdown on hover
339
+
340
+ @include media-breakpoint-up(lg) {
341
+
342
+ .navbar-nav .dropdown-menu {
343
+ z-index: $zindex-fixed;
344
+ display: block !important;
345
+ visibility: hidden;
346
+ opacity: 0;
347
+ }
348
+
349
+ .navbar-nav .hovered>.dropdown-menu {
350
+ transition: $transition-base;
351
+ transition-property: opacity, visibility, transform, -webkit-transform;
352
+ transform-origin: top center;
353
+ }
354
+
355
+ .navbar-nav .dropdown>.dropdown-menu {
356
+ left: 50%;
357
+ transform: translate3d(-50%, 10px, 0);
358
+ }
359
+
360
+ .navbar-nav .dropright>.dropdown-menu {
361
+ transform: translate3d(0, 10px, 0);
362
+ }
363
+
364
+ .navbar-nav .dropdown.show>.dropdown-menu,
365
+ .navbar-nav .dropright.show>.dropdown-menu {
366
+ visibility: visible;
367
+ opacity: 1;
368
+ }
369
+
370
+ .navbar-nav .dropdown.show>.dropdown-menu {
371
+ transform: translate3d(-50%, 0, 0);
372
+ }
373
+
374
+ .navbar-nav .dropright.show>.dropdown-menu {
375
+ transform: translate3d(0, 0, 0);
376
+ }
377
+ }