3 width: $sidebar-collapsed-width;
15 padding: 0.75rem 1rem;
16 width: $sidebar-collapsed-width;
33 left: calc(#{$sidebar-collapsed-width} + #{$grid-gutter-width} / 2);
37 @extend .animated--grow-in;
40 border-radius: $border-radius;
41 box-shadow: $box-shadow;
55 font-size: $dropdown-font-size;
61 padding: .5rem 1.5rem;
62 text-transform: uppercase;
73 text-decoration: none;
74 border-radius: $border-radius;
78 background-color: $gray-200;
82 background-color: $gray-300;
104 font-family: 'Font Awesome 5 Free';
105 margin-right: 0.1rem;
109 text-decoration: none;
121 #sidebarToggle::after {
123 font-family: 'Font Awesome 5 Free';
124 margin-left: 0.25rem;
133 height: $topbar-base-height;
134 text-decoration: none;
137 padding: 1.5rem 1rem;
139 text-transform: uppercase;
140 letter-spacing: 0.05rem;
143 .sidebar-brand-icon i {
147 .sidebar-brand-text {
161 @extend .text-uppercase;
166 flex-direction: column;
168 font-size: $font-size-sm;
169 border-radius: $border-radius;
170 color: fade-out($white, 0.2);
175 background-color: fade-out($black, 0.9);
176 .sidebar-card-illustration {
180 .sidebar-card-title {
185 color: fade-out($white, 0.5);
190 @include media-breakpoint-up(md) {
192 width: $sidebar-base-width !important;
212 transition: $transition-collapse;
225 width: $sidebar-base-width;
229 margin-right: 0.25rem;
237 // Accordion Arrow Icon
238 &[data-toggle="collapse"] {
247 font-family: 'Font Awesome 5 Free';
258 .sidebar-brand-icon i {
262 .sidebar-brand-text {
273 width: $sidebar-collapsed-width !important;
280 left: calc(#{$sidebar-collapsed-width} + #{$grid-gutter-width} / 2);
283 // Grow In Animation for Toggled State
284 animation-name: growIn;
285 animation-duration: 200ms;
286 animation-timing-function: transform cubic-bezier(.18, 1.25, .4, 1), opacity cubic-bezier(0, 1, .4, 1);
289 box-shadow: $box-shadow;
290 border-radius: $border-radius;
310 padding: 0.75rem 1rem;
311 width: $sidebar-collapsed-width;
322 &[data-toggle="collapse"]::after {
329 .sidebar-brand-icon i {
333 .sidebar-brand-text {
345 // Sidebar Color Variants
354 border-top: 1px solid $gray-200;
380 &[data-toggle="collapse"]::after {
396 // Color the sidebar toggler
398 background-color: $gray-200;
405 background-color: $gray-300;
417 border-top: 1px solid fade-out($white, 0.85);
421 color: fade-out($white, 0.6);
426 color: fade-out($white, 0.2);
429 color: fade-out($white, 0.7);
443 &[data-toggle="collapse"]::after {
444 color: fade-out($white, 0.5);
459 // Color the sidebar toggler
461 background-color: fade-out($white, 0.8);
464 color: fade-out($white, 0.5);
468 background-color: fade-out($white, 0.75);
473 #sidebarToggle::after {
474 color: fade-out($white, 0.5);