WebSVN – LeadersLinked - Backend – Autoría – /public/assets/scss/demo1/_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-in-out;`
		8	`transition: width .1s ease, margin .1s ease-in-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: darken($primary, 50%);`
		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 rgba(183,192,206,.2);`
		294	`box-shadow: 0 8px 10px 0 rgba(183,192,206,.2);`
		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: $body-color;`
		309	`.link-icon {`
		310	`width: 16px;`
		311	`height: 16px;`
		312	`fill: rgba(233, 236, 239, 0.21);`
		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: $text-muted;`
		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(239, 243, 255, .5);`
		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	`}`
		384	`}`
		385	`}`
		386	`}`
		387	`&.sub-menu {`
		388	`padding: 0 0 15px 33px;`
		389	`.nav-item {`
		390	`position: relative;`
		391	`.nav-link {`
		392	`height: 25px;`
		393	`color: $body-color;`
		394	`font-size: 13px;`
		395	`-webkit-transition: all .3s ease-in-out;`
		396	`transition: all .3s ease-in-out;`
		397	`&::before {`
		398	`content: '';`
		399	`width: 6px;`
		400	`height: 6px;`
		401	`border-radius: 50%;`
		402	`background: transparent;`
		403	`border: 1px solid darken($border-color, 20%);`
		404	`position: absolute;`
		405	`left: -29px;`
		406	`top: 10px;`
		407	`-webkit-transition: all .7s ease-in-out;`
		408	`-webkit-transition: all .4s ease-in-out;`
		409	`transition: all .4s ease-in-out;`
		410	`}`
		411	`&.active {`
		412	`color: $primary;`
		413	`&::before {`
		414	`border: 1px solid $primary;`
		415	`background: $primary;`
		416	`}`
		417	`}`
		418	`}`
		419	`&:hover {`
		420	`.nav-link {`
		421	`color: $primary;`
		422	`margin-left: 3px;`
		423	`&::before {`
		424	`border: 1px solid $primary;`
		425	`background: $primary;`
		426	`}`
		427	`}`
		428	`}`
		429	`}`
		430	`}`
		431	`}`
		432	`}`
		433	`@media(max-width: 991px) {`
		434	`z-index: 999;`
		435	`margin-left: -#{$sidebar-width-lg};`
		436	`visibility: hidden;`
		437	`.sidebar-open & {`
		438	`margin-left: 0;`
		439	`visibility: visible;`
		440	`}`
		441	`.sidebar-header {`
		442	`// transform: translateX($sidebar-folded-width);`
		443	`// visibility: visible;`
		444	`// transition: none;`
		445	`// .sidebar-open & {`
		446	`// transform: translateX(0);`
		447	`// }`
		448	`}`
		449	`.sidebar-body {`
		450	`.nav {`
		451	`.nav-item {`
		452	`width: auto;`
		453	`.nav-link {`
		454	`.link-icon {`
		455	`-webkit-transition: none;`
		456	`transition: none;`
		457	`margin: 0;`
		458	`}`
		459	`}`
		460	`}`
		461	`}`
		462	`}`
		463	`}`
		464	`}`
		465
		466	`.sidebar-dark {`
		467	`.sidebar {`
		468	`.sidebar-header {`
		469	`background: $sidebar-dark-bg;`
		470	`border-bottom: 1px solid rgba($border-color, .1);`
		471	`border-right: 1px solid rgba($border-color, .1);`
		472	`.sidebar-brand {`
		473	`color: $light;`
		474	`}`
		475	`.sidebar-toggler {`
		476	`span {`
		477	`background: $text-muted;`
		478	`}`
		479	`}`
		480	`}`
		481	`.sidebar-body {`
		482	`background: $sidebar-dark-bg;`
		483	`border-right: 1px solid rgba($border-color, .1);`
		484	`.nav {`
		485	`.nav-item {`
		486	`&.nav-category {`
		487	`color: $white;`
		488	`}`
		489	`.nav-link {`
		490	`color: $text-muted;`
		491	`svg {`
		492	`fill: none;`
		493	`}`
		494	`&[aria-expanded="true"] {`
		495	`color: $primary;`
		496	`}`
		497	`}`
		498	`&:hover,`
		499	`&.active {`
		500	`.nav-link {`
		501	`svg {`
		502	`fill: rgba($primary, .2);`
		503	`}`
		504	`.link-title {`
		505	`color: $primary;`
		506	`}`
		507	`}`
		508	`}`
		509	`}`
		510	`}`
		511	`}`
		512	`}`
		513	`}`
		514
		515	`// Right sidebar`
		516	`.settings-sidebar {`
		517	`position: fixed;`
		518	`right: -232px;`
		519	`top: 130px;`
		520	`width: 232px;`
		521	`background: $white;`
		522	`-webkit-box-shadow: -3px 0 10px 0 rgba(183,192,206,0.2);`
		523	`box-shadow: -3px 0 10px 0 rgba(183,192,206,0.2);`
		524	`z-index: 999;`
		525	`border-radius: 0 0 0 4px;`
		526	`-webkit-transition: all .2s ease-in-out;`
		527	`transition: all .2s ease-in-out;`
		528	`.settings-open & {`
		529	`right: 0;`
		530	`}`
		531	`.sidebar-body {`
		532	`position: relative;`
		533	`padding: 18px;`
		534	`.settings-sidebar-toggler {`
		535	`position: absolute;`
		536	`left: -44px;`
		537	`top: 0;`
		538	`padding: 12px;`
		539	`border-radius: 4px 0 0 4px;`
		540	`background: $white;`
		541	`-webkit-box-shadow: -3px 0 10px 0 rgba(183,192,206,0.2);`
		542	`box-shadow: -3px 0 10px 0 rgba(183,192,206,0.2);`
		543	`svg {`
		544	`width: 20px;`
		545	`height: 20px;`
		546	`color: $text-muted;`
		547	`@extend .infinite-spin;`
		548	`}`
		549	`}`
		550	`.theme-wrapper {`
		551	`.theme-item {`
		552	`position: relative;`
		553	`display: block;`
		554	`margin-bottom: 19px;`
		555	`border-radius: 6px;`
		556	`border: 3px solid $light;`
		557	`&::after {`
		558	`content: '';`
		559	`position: absolute;`
		560	`top: 0;`
		561	`left: 0;`
		562	`width: 100%;`
		563	`height: 100%;`
		564	`background: rgba($primary, 0);`
		565	`}`
		566	`&:last-child {`
		567	`margin-bottom: 0;`
		568	`}`
		569	`&.active {`
		570	`border: 3px solid lighten($primary, 15%);`
		571	`}`
		572	`img {`
		573	`width: 100%;`
		574	`border-radius: 3px;`
		575	`}`
		576	`&:hover {`
		577	`&::after {`
		578	`background: rgba($primary, .2);`
		579	`-webkit-transition: all .3s ease-in-out;`
		580	`transition: all .3s ease-in-out;`
		581	`}`
		582	`}`
		583	`}`
		584	`}`
		585	`}`
		586	`}`
		587
		588

Proyectos de Subversion LeadersLinked - Backend

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