com.phloxui/styles/mixins/side-nav.less

PhloxUI Ng2+ Framework

// Mixins lib for rounded corner style
@import "../variables";
@import "../bootstrap/variables";

.phlox-side-nav(@width: @DEFAULT_SIDE_NAV_WIDTH, @duration: @DEFAULT_SIDE_NAV_TRANSITION_DURATION, @tFunc: @DEFAULT_SIDE_NAV_TRANSITION_TIMING_FUNCTION, @bg: @DEFAULT_SIDE_NAV_BG, @zIdx: @DEFAULT_SIDE_NAV_Z_INDEX) {
	.phlox-side-nav-default-open(@width, @duration, @tFunc, @bg, @zIdx);
}

.phlox-side-nav {
	.phlox-side-nav();
}

.phlox-side-nav-default-open(@width: @DEFAULT_SIDE_NAV_WIDTH, @duration: @DEFAULT_SIDE_NAV_TRANSITION_DURATION, @tFunc: @DEFAULT_SIDE_NAV_TRANSITION_TIMING_FUNCTION, @bg: @DEFAULT_SIDE_NAV_BG, @zIdx: @DEFAULT_SIDE_NAV_Z_INDEX) {
    // Root wrapper (both "sidebar" & "content")
    &-wrapper {
    	padding-left: 0;
	    -webkit-transition: all @duration e(@tFunc);
	    -moz-transition: all @duration e(@tFunc);
	    -o-transition: all @duration e(@tFunc);
	    transition: all @duration e(@tFunc);
    }

    &-wrapper.toggled {
	    padding-left: @width;
	}

	&-wrapper.fixed.toggled {
	    padding-left: 0;
	}

	// Sidebar
	&-wrapper > .sidebar-wrapper {
		z-index: @zIdx;
	    position: fixed;
	    left: @width;
	    width: 0;
	    height: 100%;
	    margin-left: -@width;
	    overflow-y: auto;
	    -webkit-transition: all @duration e(@tFunc);
	    -moz-transition: all @duration e(@tFunc);
	    -o-transition: all @duration e(@tFunc);
	    transition: all @duration e(@tFunc);
	    background: @bg;
	}

	&-wrapper.slide > .sidebar-wrapper {
		width: @width;
	    margin-left: -(2 * @width);
	}

	&-wrapper.slide.toggled > .sidebar-wrapper {
	    margin-left: -@width;
	}

	&-wrapper.toggled > .sidebar-wrapper {
	    width: @width;
	}

	&-wrapper > .sidebar-wrapper > * {
		position: absolute;
	    top: 0;
	    width: @width;
	    margin: 0;
	    padding: 0;
	}

	// Content
	&-wrapper > .content-wrapper {
		width: 100%;
	    position: absolute;
	    background: @bg;
	}

	&-wrapper.toggled > .content-wrapper {
		position: absolute;
    	margin-right: -@width;
	}

	&-wrapper.fixed.toggled > .content-wrapper {
    	margin-right: 0;
	}

	@media(min-width: @screen-sm) {
	    &-wrapper {
	        padding-left: @width;
	    }

	    &-wrapper.fixed {
	        padding-left: 0;
	    }

	    &-wrapper.toggled {
	        padding-left: 0;
	    }

	    &-wrapper > .sidebar-wrapper {
	        width: @width;
	    }

	    &-wrapper.toggled > .sidebar-wrapper {
	        width: 0;
	    }

	    &-wrapper.slide.toggled > .sidebar-wrapper {
	        width: @width;
	    }

	    &-wrapper > .content-wrapper {
	        position: relative;
	    }

	    &-wrapper.toggled > .content-wrapper {
	        position: relative;
	        margin-right: 0;
	    }

		&-wrapper.slide > .sidebar-wrapper {
			width: @width;
		    margin-left: -@width;
		}

		&-wrapper.slide.toggled > .sidebar-wrapper {
		    margin-left: -(2 * @width);
		}
	}
}

.phlox-side-nav-default-open {
	.phlox-side-nav-default-open();
}

.phlox-side-nav-default-close(@width: @DEFAULT_SIDE_NAV_WIDTH, @duration: @DEFAULT_SIDE_NAV_TRANSITION_DURATION, @tFunc: @DEFAULT_SIDE_NAV_TRANSITION_TIMING_FUNCTION, @bg: @DEFAULT_SIDE_NAV_BG, @zIdx: @DEFAULT_SIDE_NAV_Z_INDEX) {
    // Root wrapper (both "sidebar" & "content")
    &-wrapper {
    	padding-left: 0;
	    -webkit-transition: all @duration e(@tFunc);
	    -moz-transition: all @duration e(@tFunc);
	    -o-transition: all @duration e(@tFunc);
	    transition: all @duration e(@tFunc);
    }

    &-wrapper.toggled {
	    padding-left: @width;
	}

	&-wrapper.fixed.toggled {
	    padding-left: 0;
	}

	// Sidebar
	&-wrapper > .sidebar-wrapper {
		z-index: @zIdx;
	    position: fixed;
	    left: @width;
	    width: 0;
	    height: 100%;
	    margin-left: -@width;
	    overflow-y: auto;
	    -webkit-transition: all @duration e(@tFunc);
	    -moz-transition: all @duration e(@tFunc);
	    -o-transition: all @duration e(@tFunc);
	    transition: all @duration e(@tFunc);
	    background: @bg;
	}

	&-wrapper.slide > .sidebar-wrapper {
		width: @width;
	    margin-left: -(2 * @width);
	}

	&-wrapper.toggled > .sidebar-wrapper {
	    width: @width;
	}

	&-wrapper.slide.toggled > .sidebar-wrapper {
	    margin-left: -@width;
	}

	&-wrapper > .sidebar-wrapper > * {
		position: absolute;
	    top: 0;
	    width: @width;
	    margin: 0;
	    padding: 0;
	}

	// Content
	&-wrapper > .content-wrapper {
		width: 100%;
	    position: absolute;
	    background: @bg;
	}

	&-wrapper.toggled > .content-wrapper {
		position: absolute;
    	margin-right: 0;
	}

	@media(min-width: @screen-sm) {
	    &-wrapper > .content-wrapper {
	        position: relative;
	    }

	    &-wrapper.toggled > .content-wrapper {
	        position: relative;
	        margin-right: -@width;
	    }

	    &-wrapper.fixed.toggled > .content-wrapper {
	        margin-right: 0;
	    }
	}
}

.phlox-side-nav-default-close {
	.phlox-side-nav-default-close();
}