WebSVN – LeadersLinked - Backend – Autoría – /public/assets/scss/demo2/_sidebar.scss

Rev	Autor	Línea Nro.	Línea
16825	efrain	1	`.sidebar {`
		2	`width: $sidebar-width-lg;`
		3	`height: 100%;`
		4	`position: fixed;`
		5	`left: 0;`
		6	`top: 0;`
		7	`-webkit-transition: width .1s ease, margin .1s ease-out;`
		8	`transition: width .1s ease, margin .1s ease-out;`
		9	`z-index: 999;`
		10
		11	`.sidebar-header {`
		12	`background: $card-bg;`
		13	`height: $navbar-height;`
		14	`border-bottom: 1px solid $border-color;`
		15	`display: flex;`
		16	`justify-content: space-between;`
		17	`align-items: center;`
		18	`padding: 0 25px;`
		19	`border-right: 1px solid $border-color;`
		20	`z-index: 999;`
		21	`width: $sidebar-width-lg;`
		22	`-webkit-transition: width .1s ease;`
		23	`transition: width .1s ease;`
		24
		25	`.sidebar-open & {`
		26	`border-bottom: 1px solid $border-color;`
		27	`}`
		28
		29	`.sidebar-brand {`
		30	`opacity: 1;`
		31	`visibility: visible;`
		32	`-webkit-transition: opacity .5s ease;`
		33	`transition: opacity .5s ease;`
		34	`font-weight: 700;`
		35	`font-size: 25px;`
		36	`color: $body-color;`
		37	`direction: ltr#{'/rtl:ignore/'};`
		38	`span {`
		39	`color: $primary;`
		40	`font-weight: 300;`
		41	`}`
		42	`}`
		43	`.sidebar-toggler {`
		44	`cursor: pointer;`
		45	`width: 18px;`
		46	`span {`
		47	`display: block;`
		48	`width: 100%;`
		49	`border-radius: 3px;`
		50	`height: 2px;`
		51	`background: $text-muted;`
		52	`-webkit-transition: all .3s;`
		53	`transition: all .3s;`
		54	`position: relative;`
		55	`}`
		56
		57	`span + span {`
		58	`margin-top: 4px;`
		59	`}`
		60
		61	`&.active span:nth-child(1) {`
		62	`-webkit-animation: ease .6s top forwards;`
		63	`animation: ease .6s top forwards;`
		64	`}`
		65
		66	`&.not-active span:nth-child(1) {`
		67	`-webkit-animation: ease .6s top-2 forwards;`
		68	`animation: ease .6s top-2 forwards;`
		69	`}`
		70
		71	`&.active span:nth-child(2) {`
		72	`-webkit-animation: ease .6s scaled forwards;`
		73	`animation: ease .6s scaled forwards;`
		74	`}`
		75
		76	`&.not-active span:nth-child(2) {`
		77	`-webkit-animation: ease .6s scaled-2 forwards;`
		78	`animation: ease .6s scaled-2 forwards;`
		79	`}`
		80
		81	`&.active span:nth-child(3) {`
		82	`-webkit-animation: ease .6s bottom forwards;`
		83	`animation: ease .6s bottom forwards;`
		84	`}`
		85
		86	`&.not-active span:nth-child(3) {`
		87	`-webkit-animation: ease .6s bottom-2 forwards;`
		88	`animation: ease .6s bottom-2 forwards;`
		89	`}`
		90
		91	`@-webkit-keyframes top {`
		92	`0% {`
		93	`top: 0;`
		94	`-webkit-transform: rotate(0);`
		95	`transform: rotate(0);`
		96	`}`
		97	`50% {`
		98	`top: 6px;`
		99	`-webkit-transform: rotate(0);`
		100	`transform: rotate(0);`
		101	`}`
		102	`100% {`
		103	`top: 6px;`
		104	`-webkit-transform: rotate(45deg);`
		105	`transform: rotate(45deg);`
		106	`}`
		107	`}`
		108
		109	`@keyframes top {`
		110	`0% {`
		111	`top: 0;`
		112	`-webkit-transform: rotate(0);`
		113	`transform: rotate(0);`
		114	`}`
		115	`50% {`
		116	`top: 6px;`
		117	`-webkit-transform: rotate(0);`
		118	`transform: rotate(0);`
		119	`}`
		120	`100% {`
		121	`top: 6px;`
		122	`-webkit-transform: rotate(45deg);`
		123	`transform: rotate(45deg);`
		124	`}`
		125	`}`
		126
		127	`@-webkit-keyframes top-2 {`
		128	`0% {`
		129	`top: 6px;`
		130	`-webkit-transform: rotate(45deg);`
		131	`transform: rotate(45deg);`
		132	`}`
		133	`50% {`
		134	`top: 6px;`
		135	`-webkit-transform: rotate(0deg);`
		136	`transform: rotate(0deg);`
		137	`}`
		138	`100% {`
		139	`top: 0;`
		140	`-webkit-transform: rotate(0deg);`
		141	`transform: rotate(0deg);`
		142	`}`
		143	`}`
		144
		145	`@keyframes top-2 {`
		146	`0% {`
		147	`top: 6px;`
		148	`-webkit-transform: rotate(45deg);`
		149	`transform: rotate(45deg);`
		150	`}`
		151	`50% {`
		152	`top: 6px;`
		153	`-webkit-transform: rotate(0deg);`
		154	`transform: rotate(0deg);`
		155	`}`
		156	`100% {`
		157	`top: 0;`
		158	`-webkit-transform: rotate(0deg);`
		159	`transform: rotate(0deg);`
		160	`}`
		161	`}`
		162
		163	`@-webkit-keyframes bottom {`
		164	`0% {`
		165	`bottom: 0;`
		166	`-webkit-transform: rotate(0);`
		167	`transform: rotate(0);`
		168	`}`
		169	`50% {`
		170	`bottom: 6px;`
		171	`-webkit-transform: rotate(0);`
		172	`transform: rotate(0);`
		173	`}`
		174	`100% {`
		175	`bottom: 6px;`
		176	`-webkit-transform: rotate(135deg);`
		177	`transform: rotate(135deg);`
		178	`}`
		179	`}`
		180
		181	`@keyframes bottom {`
		182	`0% {`
		183	`bottom: 0;`
		184	`-webkit-transform: rotate(0);`
		185	`transform: rotate(0);`
		186	`}`
		187	`50% {`
		188	`bottom: 6px;`
		189	`-webkit-transform: rotate(0);`
		190	`transform: rotate(0);`
		191	`}`
		192	`100% {`
		193	`bottom: 6px;`
		194	`-webkit-transform: rotate(135deg);`
		195	`transform: rotate(135deg);`
		196	`}`
		197	`}`
		198
		199	`@-webkit-keyframes bottom-2 {`
		200	`0% {`
		201	`bottom: 6px;`
		202	`-webkit-transform: rotate(135deg);`
		203	`transform: rotate(135deg);`
		204	`}`
		205	`50% {`
		206	`bottom: 6px;`
		207	`-webkit-transform: rotate(0);`
		208	`transform: rotate(0);`
		209	`}`
		210	`100% {`
		211	`bottom: 0;`
		212	`-webkit-transform: rotate(0);`
		213	`transform: rotate(0);`
		214	`}`
		215	`}`
		216
		217	`@keyframes bottom-2 {`
		218	`0% {`
		219	`bottom: 6px;`
		220	`-webkit-transform: rotate(135deg);`
		221	`transform: rotate(135deg);`
		222	`}`
		223	`50% {`
		224	`bottom: 6px;`
		225	`-webkit-transform: rotate(0);`
		226	`transform: rotate(0);`
		227	`}`
		228	`100% {`
		229	`bottom: 0;`
		230	`-webkit-transform: rotate(0);`
		231	`transform: rotate(0);`
		232	`}`
		233	`}`
		234
		235	`@-webkit-keyframes scaled {`
		236	`50% {`
		237	`-webkit-transform: scale(0);`
		238	`transform: scale(0);`
		239	`}`
		240	`100% {`
		241	`-webkit-transform: scale(0);`
		242	`transform: scale(0);`
		243	`}`
		244	`}`
		245
		246	`@keyframes scaled {`
		247	`50% {`
		248	`-webkit-transform: scale(0);`
		249	`transform: scale(0);`
		250	`}`
		251	`100% {`
		252	`-webkit-transform: scale(0);`
		253	`transform: scale(0);`
		254	`}`
		255	`}`
		256
		257	`@-webkit-keyframes scaled-2 {`
		258	`0% {`
		259	`-webkit-transform: scale(0);`
		260	`transform: scale(0);`
		261	`}`
		262	`50% {`
		263	`-webkit-transform: scale(0);`
		264	`transform: scale(0);`
		265	`}`
		266	`100% {`
		267	`-webkit-transform: scale(1);`
		268	`transform: scale(1);`
		269	`}`
		270	`}`
		271
		272	`@keyframes scaled-2 {`
		273	`0% {`
		274	`-webkit-transform: scale(0);`
		275	`transform: scale(0);`
		276	`}`
		277	`50% {`
		278	`-webkit-transform: scale(0);`
		279	`transform: scale(0);`
		280	`}`
		281	`100% {`
		282	`-webkit-transform: scale(1);`
		283	`transform: scale(1);`
		284	`}`
		285	`}`
		286	`}`
		287	`}`
		288	`.sidebar-body {`
		289	`max-height: calc(100% - #{$navbar-height});`
		290	`position: relative;`
		291	`border-right: 1px solid $border-color;`
		292	`height: 100%;`
		293	`-webkit-box-shadow: 0 8px 10px 0 #03060b;`
		294	`box-shadow: 0 8px 10px 0 #03060b;`
		295	`background: $card-bg;`
		296	`.nav {`
		297	`display: flex;`
		298	`flex-direction: column;`
		299	`padding: 25px 25px 50px 25px;`
		300	`.nav-item {`
		301	`position: relative;`
		302	`.nav-link {`
		303	`display: flex;`
		304	`align-items: center;`
		305	`padding: 0;`
		306	`height: 32px;`
		307	`white-space: nowrap;`
		308	`color: $text-muted;`
		309	`.link-icon {`
		310	`width: 16px;`
		311	`height: 16px;`
		312	`fill: none;`
		313	`position: absolute;`
		314	`color: inherit;`
		315	`}`
		316	`.link-title {`
		317	`margin-left: 30px;`
		318	`font-size: 14px;`
		319	`-webkit-transition: all .2s ease-in-out;`
		320	`transition: all .2s ease-in-out;`
		321	`}`
		322	`.link-arrow {`
		323	`width: 14px;`
		324	`height: 14px;`
		325	`margin-left: auto;`
		326	`-webkit-transition: all .3s ease;`
		327	`-webkit-transition: all .3s ease-in-out;`
		328	`transition: all .3s ease-in-out;`
		329	`color: inherit;`
		330	`}`
		331	`.link-icon,`
		332	`.link-title,`
		333	`.link-arrow {`
		334	`-webkit-transition: all .3s ease;`
		335	`transition: all .3s ease;`
		336	`}`
		337	`&[aria-expanded="true"] {`
		338	`color: $primary;`
		339	`.link-arrow {`
		340	`-webkit-transform: rotate(90deg);`
		341	`transform: rotate(180deg);`
		342	`}`
		343	`}`
		344	`}`
		345	`&.nav-category {`
		346	`color: $body-color;`
		347	`font-size: 11px;`
		348	`text-transform: uppercase;`
		349	`font-weight: 500;`
		350	`letter-spacing: .5px;`
		351	`margin-bottom: 5px;`
		352	`height: 15px;`
		353	`&:not(:first-child) {`
		354	`margin-top: 20px;`
		355	`}`
		356	`}`
		357	`&:hover {`
		358	`.nav-link {`
		359	`color: $primary;`
		360	`.link-title {`
		361	`margin-left: 31px;`
		362	`}`
		363	`.link-icon {`
		364	`color: $primary;`
		365	`fill: rgba($primary, .2);`
		366	`}`
		367	`}`
		368	`}`
		369	`&.active {`
		370	`.nav-link {`
		371	`color: $primary;`
		372	`&::before {`
		373	`content: '';`
		374	`width: 3px;`
		375	`height: 26px;`
		376	`background: $primary;`
		377	`position: absolute;`
		378	`left: -25px;`
		379	`}`
		380	`.link-icon {`
		381	`fill: rgba(239, 243, 255, .5);`
		382	`color: $primary;`
		383	`fill: rgba($primary, .2);`
		384	`}`
		385	`}`
		386	`}`
		387	`}`
		388	`&.sub-menu {`
		389	`padding: 0 0 15px 33px;`
		390	`.nav-item {`
		391	`position: relative;`
		392	`.nav-link {`
		393	`height: 25px;`
		394	`color: $text-muted;`
		395	`font-size: 13px;`
		396	`-webkit-transition: all .3s ease-in-out;`
		397	`transition: all .3s ease-in-out;`
		398	`&::before {`
		399	`content: '';`
		400	`width: 6px;`
		401	`height: 6px;`
		402	`border-radius: 50%;`
		403	`background: transparent;`
		404	`border: 1px solid rgba($primary, .6);`
		405	`position: absolute;`
		406	`left: -29px;`
		407	`top: 10px;`
		408	`-webkit-transition: all .7s ease-in-out;`
		409	`-webkit-transition: all .4s ease-in-out;`
		410	`transition: all .4s ease-in-out;`
		411	`}`
		412	`&.active {`
		413	`color: $primary;`
		414	`&::before {`
		415	`border: 1px solid $primary;`
		416	`background: $primary;`
		417	`}`
		418	`}`
		419	`}`
		420	`&:hover {`
		421	`.nav-link {`
		422	`color: $primary;`
		423	`margin-left: 3px;`
		424	`&::before {`
		425	`border: 1px solid $primary;`
		426	`background: $primary;`
		427	`}`
		428	`}`
		429	`}`
		430	`}`
		431	`}`
		432	`}`
		433	`}`
		434	`@media(max-width: 991px) {`
		435	`z-index: 999;`
		436	`margin-left: -#{$sidebar-width-lg};`
		437	`visibility: hidden;`
		438	`.sidebar-open & {`
		439	`margin-left: 0;`
		440	`visibility: visible;`
		441	`}`
		442	`.sidebar-header {`
		443	`// transform: translateX($sidebar-folded-width);`
		444	`// visibility: visible;`
		445	`// transition: none;`
		446	`// .sidebar-open & {`
		447	`// transform: translateX(0);`
		448	`// }`
		449	`}`
		450	`.sidebar-body {`
		451	`.nav {`
		452	`.nav-item {`
		453	`width: auto;`
		454	`.nav-link {`
		455	`.link-icon {`
		456	`-webkit-transition: none;`
		457	`transition: none;`
		458	`margin: 0;`
		459	`}`
		460	`}`
		461	`}`
		462	`}`
		463	`}`
		464	`}`
		465	`}`
		466
		467	`// Right sidebar`
		468	`.settings-sidebar {`
		469	`position: fixed;`
		470	`right: -232px;`
		471	`top: 130px;`
		472	`width: 232px;`
		473	`background: $card-bg;`
		474	`-webkit-box-shadow: -3px 0 10px 0 #08101e;`
		475	`box-shadow: -3px 0 10px 0 #08101e;`
		476	`z-index: 999;`
		477	`border-radius: 0 0 0 4px;`
		478	`-webkit-transition: all .2s ease-in-out;`
		479	`transition: all .2s ease-in-out;`
		480	`.settings-open & {`
		481	`right: 0;`
		482	`}`
		483	`.sidebar-body {`
		484	`position: relative;`
		485	`padding: 18px;`
		486	`border: 1px solid $border-color;`
		487	`.settings-sidebar-toggler {`
		488	`position: absolute;`
		489	`left: -45px;`
		490	`top: -1px;`
		491	`padding: 12px;`
		492	`border-radius: 4px 0 0 4px;`
		493	`background: $card-bg;`
		494	`-webkit-box-shadow: -3px 0 10px 0 #08101e;`
		495	`box-shadow: -3px 0 10px 0 #08101e;`
		496	`border: 1px solid $border-color;`
		497	`border-right: 0;`
		498	`svg {`
		499	`width: 20px;`
		500	`height: 20px;`
		501	`color: $body-color;`
		502	`@extend .infinite-spin;`
		503	`}`
		504	`}`
		505	`.theme-wrapper {`
		506	`.theme-item {`
		507	`position: relative;`
		508	`display: block;`
		509	`margin-bottom: 19px;`
		510	`border-radius: 6px;`
		511	`border: 3px solid $light;`
		512	`&::after {`
		513	`content: '';`
		514	`position: absolute;`
		515	`top: 0;`
		516	`left: 0;`
		517	`width: 100%;`
		518	`height: 100%;`
		519	`background: rgba($primary, 0);`
		520	`}`
		521	`&:last-child {`
		522	`margin-bottom: 0;`
		523	`}`
		524	`&.active {`
		525	`border: 3px solid lighten($primary, 15%);`
		526	`}`
		527	`img {`
		528	`width: 100%;`
		529	`border-radius: 3px;`
		530	`}`
		531	`&:hover {`
		532	`&::after {`
		533	`background: rgba($primary, .2);`
		534	`-webkit-transition: all .3s ease-in-out;`
		535	`transition: all .3s ease-in-out;`
		536	`}`
		537	`}`
		538	`}`
		539	`}`
		540	`}`
		541	`}`
		542
		543

Proyectos de Subversion LeadersLinked - Backend

(root)/public/assets/scss/demo2/_sidebar.scss – Rev 16825