FM / scss

/var/www/clients/client1/web2/web/admin/responsive-sidebar-navigation-master/scss/

/var/www/clients/client1/web2/web/admin/responsive-sidebar-navigation-master/scss

Name	Size	Mode	Actions
style.scss	11571	0644	edit dl rm

Edit: /var/www/clients/client1/web2/web/admin/responsive-sidebar-navigation-master/scss/style.scss (11571B)

@import 'bourbon'; // http://bourbon.io/

@import '../partials/variables'; // colors, fonts etc...

@import '../partials/mixins'; // custom mixins

@import '../partials/layout'; // responsive grid and media queries

/* --------------------------------

Primary style

-------------------------------- */

*, *::after, *::before {
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body {
	font: {
		size: 1.6rem;
		family: $primary-font; // variables inside partials > _variables.scss
	}
	color: $color-1;
	background-color: $color-3;
	@include clearfix;
}

a {
	color: $color-2;
	text-decoration: none;
}

input {
	font-family: $primary-font;
	font-size: 1.6rem;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

/* --------------------------------

Main Page Content

-------------------------------- */

.cd-main-content {

.content-wrapper {
		padding: $header-height-S 5% 3em;

h1 {
			text-align: center;
			padding: 3em 0;
			font-size: 2rem;
		}
	}

&::before {
		/* never visible - used to check MQ in jQuery */
		display: none;
		content: 'mobile';
	}

@include MQ(M) {

.content-wrapper {
			margin-left: $sidebar-width-M;
			padding-top: $header-height-M;

h1 {
				padding: 4em 0;
				font-size: 3.2rem;
				font-weight: 300;
			}
		}

&::before {
			content: 'tablet';
		}
	}

@include MQ(L) {

.content-wrapper {
			margin-left: $sidebar-width-L;
		}

&::before {
			content: 'desktop';
		}
	}
}

/* --------------------------------

Header

-------------------------------- */

.cd-main-header {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;

height: $header-height-S;
	width: 100%;

background: $color-1;
	box-shadow: 0 1px 3px rgba(#000, .2);
	@include clearfix;
	@include font-smoothing;

@include MQ(M) {
		position: fixed;
		height: $header-height-M;
	}
}

.cd-logo {
	float: left;
	display: block;
	margin: 11px 0 0 5%;

img {
		display: block;
	}

@include MQ(M) {
		margin: 16px 0 0 36px;
	}
}

.cd-nav-trigger {
	/* navigation trigger - visible on mobile devices only */
	float: right;
	position: relative;
	display: block;
	width: 34px;
	height: 44px;
	margin-right: 5%;
	/* hide text */
	overflow: hidden;
	white-space: nowrap;
	color: transparent;

span, span::before, span::after {
		/* hamburger icon in CSS */
		position: absolute;
		display: inline-block;
		height: 3px;
		width: 24px;
		background: $color-3;
	}

span {
		/* line in the center */
		position: absolute;
		top: 50%;
		right: 5px;
		margin-top: -2px;
		@include transition(background .2s);
	}

span::before, span::after {
		/* other 2 lines */
		content: '';
		right: 0;
		/* Force Hardware Acceleration in WebKit */
		@include transform(translateZ(0));
		@include backface-visibility(hidden);
		
		@include transform-origin(0% 50%);
		@include transition(transform .2s);
	}

span::before {
		/* menu icon top line */
		top: -6px;
	}

span::after {
		/* menu icon bottom line */
		top: 6px;
	}

&.nav-is-visible {
		span {
			/* hide line in the center */
			background: rgba($color-3, 0);
		}

span::before, span::after {
			/* keep visible other 2 lines */
			background: rgba($color-3, 1);
		}

span::before {
			@include transform(translateX(4px) translateY(-3px) rotate(45deg));
		}

span::after {
			@include transform(translateX(4px) translateY(2px) rotate(-45deg));
		}
	}

@include MQ(M) {
		display: none;
	}
}

.cd-search {
	position: relative;
	margin: 1.2em 5% 0.6em;

&.is-hidden {
		opacity: 0;
	}

&::before {
		/* lens icon */
		content: '';
		position: absolute;
		left: 8px;
		@include center(y);
		height: 16px;
		width: 16px;
		background: url(../img/cd-search.svg) no-repeat 0 0;
	}

input {
		padding-left: 32px;
		width: 100%;
		height: 36px;
		border: none;
		border-radius: .25em;
		@include appearance(none);

&:focus {
			outline: none;
		}
	}

@include MQ(M) {
		float: left;
		display: inline-block;
		width: 250px;
		height: 100%;
		// padding: 12px 0;
		margin: 0 0 0 2.5em;

&.is-hidden {
			/* reset style */
			opacity: 1;
		}

&::before {
			background-position: 0 -16px;
			left: 1em;
		}

form, input {
			height: 100%;
			width: 100%;
		}

input {
			border: none;
			padding-left: 2.6em;
			border-radius: 0;
			background-color: $color-1;
			border-left: 1px solid tint($color-1, 10%);
			color: $color-3;

@include placeholder {
				color: tint($color-1, 30%);
			}
		}
	}
}

/* --------------------------------

Top Navigation

-------------------------------- */

.cd-nav {
	/* top nav - not visible on mobile devices */ 
	display: none;

@include MQ(M) {
		display: block;
		float: right;
		height: 100%;
	}
}

.cd-top-nav {
	> li > a::before  {
		/* reset style */
		display: none;
	}

> li a {
		padding: 1em 5% !important;
	}

img {
		/* avatar image */
		position: absolute;
		left: 1.8em;
		@include center(y);
		height: 20px;
		width: 20px;
		border-radius: 50%;
		display: none;
	}

@include MQ(M) {
		height: 100%;

a {
			display: block;
			font-size: 1.4rem;
			color: $color-3;
		}

> li {
			display: inline-block;
			margin-right: 1em;
			height: 100%;

&:last-of-type {
				margin-right: 0;
			}
		}

> li a {
			padding: 1em .6em !important;
		}

img {
			display: block;
		}
	}

@include MQ(L) {
		li:not(.has-children) a:hover {
			color: $color-2;
		}
	}
}

/* --------------------------------

Sidebar

-------------------------------- */

.cd-side-nav {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	padding: $header-height-S 0 0;
	background-color: darken($color-1, 8%);
	visibility: hidden;
	opacity: 0;
	max-height: 100vh;
	overflow: hidden;
	@include font-smoothing;
	@include transition(opacity .2s 0s, visibility 0s .2s);

&.nav-is-visible {
		opacity: 1;
		visibility: visible;
		overflow: visible;
		-webkit-overflow-scrolling: touch;
		@include transition(opacity .2s 0s, visibility 0s 0s);
		max-height: none;
		box-shadow: 0 2px 10px rgba(#000, .2);
	}
	
	> ul {
		padding: 0.6em 0;

&:last-of-type {
			padding-bottom: 0;
		}
	}

.cd-label, a {
		display: block;
		padding: 1em 5%;
	}

.cd-label {
		text-transform: uppercase;
		font-weight: bold;
		color: tint($color-1, 20%);
		font-size: 1rem;
		letter-spacing: .1em;
	}

a {
		position: relative;
		color: $color-3;
		font-size: 1.4rem;
	}

ul.cd-top-nav > li:last-of-type > a {
		border-bottom: none;
	}

> ul > li > a {
		padding-left: calc(5% + 24px);
		border-bottom: 1px solid darken($color-1, 3%);

&::before {
			/* icon before item name */
			position: absolute;
			content: '';
			left: 5%;
			@include center(y);
			height: 16px;
			width: 16px;
			background: url(../img/cd-nav-icons.svg) no-repeat 0 0;
		}
	}

> ul > li.overview > a::before {
		background-position: -64px 0;
	}

> ul > li.notifications > a::before {
		background-position: -80px 0;
	}

> ul > li.comments > a::before {
		background-position: -48px 0;
	}

> ul > li.bookmarks > a::before {
		background-position: -32px 0;
	}

> ul > li.images > a::before {
		background-position: 0 0;
	}

> ul > li.users > a::before {
		background-position: -16px 0;
	}

.count {
		/* notification badge */
		position: absolute;
		@include center(y);
		right: calc(5% + 16px + 0.4em);

padding: 0.2em 0.4em;
		background-color: $color-4;
		border-radius: .25em;

color: $color-3;
		font-weight: bold;
		font-size: 1.2rem;
		text-align: center;
	}

.action-btn a {
		display: block;
		margin: 0 5%; 
		padding: 1em 0;
		background-color: $color-2;
		border-radius: .25em;
		border: none;
		box-shadow: 0 1px 3px rgba(#000, .3), inset 0 1px 0 rgba(#fff, .2);
		
		text-align: center;
		color: $color-3;
		font-weight: bold;
		
		&::before {
			display: none;
		}
	}

@include MQ(M) {
		position: relative;
		float: left;
		top: auto;
		width: $sidebar-width-M;
		min-height: 100vh;
		padding-top: $header-height-M;
		/* reset style */
		visibility: visible;
		opacity: 1;
		overflow: visible;
		max-height: none;

&.nav-is-visible {
			box-shadow: none;
		}

&.is-fixed {
			position: fixed;
		}

> ul {
			/* reset style */
			padding: 0;
		}

.cd-label {
			/* remove labels on minified version of the sidebar */
			display: none;
		}

a {
			font-size: 1.2rem;
			text-align: center;
		}

> ul > li > a {
			padding: calc(2.2em + 24px) 0 2.4em;

&::before {
				@include center(x);
				top: 2.4em;
			}
		}

.active > a {
			/* current page */
			box-shadow: inset 3px 0 0 $color-2;
			background-color: darken($color-1, 5%);
		}

.action-btn a { 
			margin: 1em 10% 0;
		}

.count {
			height: 8px;
			width: 8px;
			border-radius: 50%;
			box-shadow: 0 0 6px rgba(#000, .2);
			padding: 0;
			top: 2em;
			@include transform(translateX(-50%));
			left: calc(50% + 5px);
			right: auto;
			color: transparent;
		}
	}

@include MQ(L) {
		width: $sidebar-width-L;

> ul {
			padding: 0.6em 0;
		}

> ul > li:not(.action-btn):hover > a {
			background-color: darken($color-1, 5%);
		}

> ul > li > a {
			padding: 1em 1em 1em 42px;
			text-align: left;
			border-bottom: none;

&::before {
				@include center(y);
				left: 18px;
			}
		}

.cd-label {
			display: block;
			padding: 1em 18px;
		}

.action-btn {
			text-align: left;

a {
				margin: 0 18px;

.no-touch &:hover {
					background-color: lighten($color-2, 5%);
				}
			}
		}

.count {
			/* reset style */
			color: $color-3;
			height: auto;
			width: auto;
			border-radius: .25em;
			padding: .2em .4em;
			@include center(y);
			right: 18px;
			left: auto;
			box-shadow: none;
		}
	}
}

.has-children {
	
	ul {
		position: relative;
		width: 100%;
		display: none;
		background-color: darken($color-1, 15%);
	}

> a::after {
		/* arrow icon */
		position: absolute;
		content: '';
		height: 16px;
		width: 16px;
		right: 5%;
		@include center(y);
		background: url(../img/cd-arrow.svg);
	}

&.selected > ul {
		display: block;
	}

&.selected > a::after {
		@include transform(translateY(-50%) rotate(180deg));
	}

@include MQ(M) {
		position: relative;
		
		ul { 
			position: absolute;
			top: 0;
			left: 100%;
			width: 160px;
			padding: 0;
			box-shadow: 0 2px 10px rgba(#000, .3);
		}

ul a {
			text-align: left;
			border: none;
			padding: 1em;

.no-touch &:hover {
				color: $color-2;
			}
		}

> a::after { 
			display: none;
		}

.cd-side-nav & {
			&.selected > a {
				/* focus state -> show sub pages */
				background-color: darken($color-1, 5%);
			}
		}

.cd-top-nav & {
			position: relative;
			background-color: darken($color-1, 8%);

> a {
				height: 100%;
				padding: 0 calc(1.8em + 22px) 0 calc(1.8em + 26px) !important;
				line-height: $header-height-M;

&::after {
					display: block;
					right: 1.8em;
				}
			}

ul {
				background-color: darken($color-1, 15%);
				width: 200px;
				top: 100%;
				right: 0;
				left: auto;
				box-shadow: 0 1px 10px rgba(#000, .2);
			}

ul a {
				padding-left: 18px !important;
			}
		}
	}

@include MQ(L) {
		
		> ul { 
			width: 100%;
			z-index: 1;
		}

ul a {
			padding-left: 18px;
		}

&.active > ul {
			/* if the item is active, make the subnavigation visible */
			position: relative;
			display: block;
			/* reset style */
			left: 0;
			box-shadow: none;
		}

.no-touch .cd-side-nav &:hover > ul, 
		.cd-side-nav &.hover > ul {
			/* show subnavigation on hover */
			display: block;
			opacity: 1;
			visibility: visible;
		}
	}
}

cmd: