bootstrap-layout/src/sass/sidebar/_sidebar-reveal.scss at master · csseditor/bootstrap-layout · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
@include media-breakpoint-up(md) {
	.sidebar-reveal {
		z-index: $zindex-navbar + 1;
		transition: transform 0.5s;
		.sidebar-menu > .sidebar-menu-item > .sidebar-menu-button span {
			opacity: 0;
			transition: opacity 0.3s;
		}
		// @TODO: SKIP SIZE 1
		@each $index in map-keys($sidebar-sizes) {
			$size: map-get($sidebar-sizes, $index);
			&.sidebar-reveal-size-#{$index} {
				&, .dropdown-container, .dropdown-container > ul {
					width: $size;
				}
				&:not(:hover) {
					@each $direction in (left, right) {
						&.sidebar-#{$direction} {
							@if $direction == 'left' {
								transform: translate3d(-($size - $sidebar-mini-width), 0, 0) !important;
							} @else {
								transform: translate3d(($size - $sidebar-mini-width), 0, 0) !important;
							}
						}
					}
				}
			}
		}
		.sidebar-category,
		.sidebar-heading,
		.sidebar-block,
		.sidebar-brand,
		.sidebar-text {
			opacity: 0;
			transition-delay: 0.2s;
			transition-timing-function: ease-in-out;
			transition-property: opacity;
			transition-duration: 0.3s;
		}
		&:hover {
			transform: translate3d(0, 0, 0) !important;
			.sidebar-category,
			.sidebar-heading,
			.sidebar-block,
			.sidebar-brand,
			.sidebar-text {
				opacity: 1;
			}
			.sidebar-menu > .sidebar-menu-item > .sidebar-menu-button span {
				opacity: 1;
			}
		}
	}
}