WebSVN – Moodle – Autoría – /theme/monocolor/scss/moodle/drawer.scss

Rev	Autor	Línea Nro.	Línea
1	efrain	1	`/* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */`
		2	`:target::before {`
		3	`content: " ";`
		4	`display: block;`
		5	`height: 60px;`
		6	`/* fixed header height*/`
		7	`margin-top: -60px;`
		8	`/* negative fixed header height */`
		9	`width: 1px;`
		10	`pointer-events: none;`
		11	`}`
		12
		13	`.pagelayout-embedded :target {`
		14	`padding-top: initial;`
		15	`margin-top: initial;`
		16	`}`
		17
		18	`#nav-drawer.closed {`
		19	`left: -($drawer-width + $drawer-offscreen-gutter);`
		20
		21	`@include media-breakpoint-between(xs, sm) {`
		22	`left: -100%;`
		23	`}`
		24	`}`
		25
		26	`#nav-drawer[aria-hidden=true] .list-group-item {`
		27	`display: none;`
		28	`}`
		29
		30	`.drawer-toggle-icon-open,`
		31	`.drawer-toggle-icon-close {`
		32	`opacity: 0;`
		33	`display: none;`
		34
		35	`transition: $transition-base;`
		36	`}`
		37
		38	`.sidebar-btn[aria-expanded="true"] {`
		39	`.drawer-toggle-icon-open {`
		40	`opacity: 1;`
		41	`display: inline-flex;`
		42	`}`
		43	`}`
		44
		45	`.sidebar-btn[aria-expanded="false"] {`
		46	`.drawer-toggle-icon-close {`
		47	`opacity: 1;`
		48	`display: inline-flex;`
		49	`}`
		50	`}`
		51
		52	`#nav-drawer {`
		53	`position: fixed;`
		54	`z-index: $zindex-fixed + 10;`
		55	`width: $drawer-width;`
		56	`top: 7px;`
		57	`right: auto;`
		58	`left: 7px;`
		59	`height: calc(100% - 14px);`
		60
		61	`background-color: $drawer-bg;`
		62	`border-radius: 9px;`
		63	`transition: right 350ms ease, left 350ms ease;`
		64
		65	`@include media-breakpoint-down(md) {`
		66	`top: 68px;`
		67	`height: calc(100% - 74px);`
		68	`}`
		69
		70	`@include media-breakpoint-between(xs, sm) {`
		71	`width: calc(100% - 14px);`
		72	`}`
		73
		74	`.theme-dark & {`
		75	`background-color: $dm-gray-100; // todo: variable`
		76	`}`
		77
		78	`.nav-drawer-container {`
		79	`max-height: calc(100vh - 133px);`
		80	`overflow-y: auto;`
		81	`overflow-x: hidden;`
		82	`padding-right: 5px;`
		83	`padding-right: 5px;`
		84	`margin: 7px 3px 4px 7px;`
		85
		86	`@include thin-scrolls($drawer-scroll-bg-track);`
		87
		88	`.theme-dark & {`
		89	`@include thin-scrolls($dm-drawer-scroll-bg-track);`
		90	`}`
		91	`}`
		92
		93	`.rui-drawer-footer {`
		94	`background-color: $drawer-nav-box-bg;`
		95	`width: 100%;`
		96	`padding: 7px 10px 10px;`
		97	`position: absolute;`
		98	`bottom: 0;`
		99	`border-radius: 0 0 9px 9px;`
		100	`}`
		101
		102	`.rui-custom-sidebar-content {`
		103	`a {`
		104	`color: $drawer-link;`
		105
		106	`&:hover {`
		107	`color: $drawer-link-h;`
		108	`}`
		109	`}`
		110	`}`
		111
		112	`h1,`
		113	`h2,`
		114	`h3,`
		115	`h4,`
		116	`h5 {`
		117	`color: $drawer-text;`
		118	`}`
		119	`}`
		120
		121	`.rui-drawer-logo {`
		122	`padding: 10px 16px;`
		123	`margin: $topbar-padding-x 0 20px;`
		124	`}`
		125
		126	`.nav-drawer-wrapper {`
		127	`margin: 40px 0;`
		128	`}`
		129
		130
		131
		132	`body.drawer-ease {`
		133	`@include transition(margin-left 0.5s ease, margin-right 0.5s ease);`
		134	`}`
		135
		136	`body:not(.uses-drawers).drawer-open-left {`
		137	`@include media-breakpoint-up(md) {`
		138	`margin-left: $drawer-left-width;`
		139	`}`
		140	`}`
		141
		142	`body.drawer-open-left #page.drawers {`
		143	`@include media-breakpoint-up(md) {`
		144	`margin-left: $drawer-left-width;`
		145	`padding-left: 1rem;`
		146	`}`
		147	`}`
		148
		149	`$right-drawer-width: 320px;`
		150
		151	`[data-region=right-hand-drawer] {`
		152	`display: flex;`
		153	`flex-direction: column;`
		154	`transition: all 350ms ease-in-out;`
		155
		156	`&.drawer {`
		157	`position: fixed;`
		158	`top: 0;`
		159	`right: 0;`
		160	`height: 100%;`
		161	`width: $right-drawer-width;`
		162	`border-left: 1px solid $border-color;`
		163	`padding: 0;`
		164	`visibility: visible;`
		165	`opacity: 1;`
		166
		167	`overflow: hidden;`
		168	`z-index: 1230;`
		169
		170	`.theme-dark & {`
		171	`border-color: $dm-border-color;`
		172	`}`
		173	`}`
		174
		175	`&.hidden {`
		176	`display: block;`
		177	`right: $right-drawer-width * -1;`
		178	`// Turn off visibility so that nothing in the drawer can receive focus when`
		179	`// it is hidden.`
		180	`visibility: hidden;`
		181	`opacity: 0;`
		182	`// Delay visibility changes until after the slide right animation has completed.`
		183	`@include transition(right 350ms ease-in-out, visibility 0s ease-in-out 350ms, opacity 0s ease-in-out 350ms);`
		184	`}`
		185	`}`
		186
		187	`@include media-breakpoint-between(xs, sm) {`
		188	`[data-region=right-hand-drawer] {`
		189	`.closewidget {`
		190	`display: block;`
		191	`padding: 0 0.2rem;`
		192	`}`
		193	`}`
		194	`}`
		195
		196
		197	`.message-drawer-backdrop {`
		198	`position: fixed;`
		199	`top: 0;`
		200	`bottom: 0;`
		201	`left: 0;`
		202	`right: 0;`
		203	`z-index: 1240;`
		204
		205	`background-color: rgba(#000, .6);`
		206
		207	`cursor: e-resize;`
		208
		209	`.layout.fullscreen & {`
		210	`display: none;`
		211	`z-index: -1;`
		212	`height: calc(100vh - 60px);`
		213	`}`
		214	`}`
		215
		216	`.rui-flatnavigation {`
		217	`list-style: none;`
		218	`padding: $drawer-box-inner-padding 0;`
		219	`margin: 0;`
		220	`}`
		221
		222	`.rui-flatnavigation-box {`
		223	`padding-bottom: 10px;`
		224	`margin-bottom: 10px;`
		225	`border-bottom: 1px solid $drawer-border;`
		226	`}`
		227
		228	`.rui-sidebar-nav-item {`
		229	`margin-bottom: 2px;`
		230
		231	`&:last-child {`
		232	`margin-bottom: 0;`
		233	`}`
		234	`}`
		235
		236	`.rui-sidebar-nav-item-link {`
		237	`padding: .35rem .65rem;`
		238
		239	`display: inline-flex;`
		240	`width: 100%;`
		241	`align-items: center;`
		242
		243	`font-size: $font-size-md;`
		244	`font-weight: $font-weight-medium;`
		245	`color: $drawer-nav-btn-text;`
		246	`word-break: break-word;`
		247
		248	`background-color: transparent;`
		249	`border: none;`
		250	`border-radius: $btn-border-radius;`
		251
		252	`transition: color 350ms ease;`
		253
		254	`.rui-sidebar-nav-icon {`
		255	`display: flex;`
		256	`align-items: center;`
		257	`justify-content: center;`
		258
		259	`width: 30px;`
		260	`height: 30px;`
		261	`margin-right: 5px;`
		262	`color: $drawer-nav-btn-icon;`
		263	`opacity: $drawer-icon-opacity;`
		264
		265	`.theme-dark & {`
		266	`color: $drawer-nav-btn-text;`
		267	`}`
		268	`}`
		269
		270	`&.active,`
		271	`&:hover {`
		272	`border: none;`
		273	`background-color: $drawer-nav-btn-bg-hover;`
		274	`color: $drawer-nav-btn-text-hover;`
		275
		276	`text-decoration: none;`
		277
		278	`.theme-dark & {`
		279	`background-color: $primary-color-800;`
		280	`color: $primary-color-100;`
		281	`}`
		282
		283	`.rui-sidebar-nav-icon {`
		284	`color: $drawer-nav-btn-text-hover;`
		285	`opacity: $drawer-icon-opacity;`
		286
		287	`.theme-dark & {`
		288	`color: $drawer-nav-btn-text;`
		289	`}`
		290	`}`
		291	`}`
		292
		293	`}`
		294
		295	`.rui-drawer-course-nav {`
		296	`margin-bottom: 10px;`
		297	`padding-top: 10px;`
		298	`padding-bottom: 10px;`
		299	`border-bottom: 1px solid $drawer-border;`
		300
		301	`.rui-sidebar-nav-item-link {`
		302	`margin-bottom: 2px;`
		303	`padding-top: 4px;`
		304	`padding-bottom: 4px;`
		305	`font-size: $font-size-xs;`
		306	`}`
		307	`}`
		308
		309	`.rui-sidebar-nav-item-link--sm {`
		310	`font-size: $font-size-xs;`
		311	`}`
		312
		313	`.rui-sidebar-nav-text,`
		314	`.rui-course-menu-list-text {`
		315	`width: calc(100% - 35px);`
		316	`}`
		317
		318	`.rui-sidebar-nav-text {`
		319	`display: inline-flex;`
		320	`align-items: center;`
		321	`justify-content: space-between;`
		322	`}`
		323
		324	`.rui-sidebar-mycourses {`
		325	`margin: 0;`
		326	`padding: $drawer-box-inner-padding;`
		327	`background-color: $drawer-nav-box-bg;`
		328	`border-radius: $btn-border-radius;`
		329	`overflow: hidden;`
		330	`}`
		331
		332	`.rui-sidebar-hr {`
		333	`margin: 0;`
		334	`padding: 0;`
		335	`display: block;`
		336	`margin: 3px -3px;`
		337	`width: calc(100% + 6px);`
		338	`height: 1px;`
		339
		340	`.theme-dark & {`
		341	`background-color: $dm-border-color;`
		342	`}`
		343	`}`
		344
		345	`// TODO: variables`
		346	`.rui-sidebar-abtn {`
		347	`width: 100%;`
		348	`padding: .35rem .45rem;`
		349	`background-color: transparent;`
		350	`border-width: 0;`
		351	`display: inline-flex;`
		352	`justify-content: space-between;`
		353	`align-items: center;`
		354
		355	`font-size: $font-size-md;`
		356	`font-weight: $font-weight-medium;`
		357	`color: $drawer-nav-btn-text;`
		358
		359	`.theme-dark & {`
		360	`color: $dm-body-color;`
		361	`border-color: $dm-border-color;`
		362	`}`
		363
		364	`.rui-drawer-badge {`
		365	`min-width: 20px;`
		366	`height: 20px;`
		367	`border-radius: 20px;`
		368	`background-color: $drawer-bg;`
		369
		370	`display: flex;`
		371	`align-items: center;`
		372	`justify-content: center;`
		373
		374	`font-size: 11px;`
		375	`font-weight: $font-weight-medium;`
		376	`color: $drawer-text;`
		377	`}`
		378
		379	`&:hover,`
		380	`&[aria-expanded="true"] {`
		381	`background-color: $drawer-nav-btn-bg-hover;`
		382	`color: $drawer-nav-btn-text-hover;`
		383
		384	`.theme-dark & {`
		385	`background-color: $drawer-nav-btn-bg;`
		386	`color: $drawer-nav-btn-text;`
		387	`}`
		388
		389	`.rui-drawer-badge {`
		390	`background-color: $drawer-nav-box-bg;`
		391	`color: $drawer-text;`
		392	`}`
		393
		394	`.rui-sidebar-nav-icon {`
		395	`color: $drawer-nav-btn-text-hover;`
		396	`}`
		397	`}`
		398
		399	`}`
		400
		401	`.rui-course-wrapper {`
		402	`max-height: 200px;`
		403	`overflow-y: auto;`
		404
		405	`@include thin-scrolls($drawer-scroll-bg-track);`
		406
		407	`.theme-dark & {`
		408	`@include thin-scrolls($dm-drawer-scroll-bg-track);`
		409	`}`
		410	`}`
		411
		412	`.rui-course-menu-list--more {`
		413	`width: 100%;`
		414	`display: inline-flex;`
		415	`justify-content: space-between;`
		416	`align-items: center;`
		417
		418	`margin: 0;`
		419	`padding: .35rem 1rem;`
		420
		421	`border-radius: $btn-border-radius;`
		422
		423	`font-size: $font-size-xs;`
		424	`color: $drawer-nav-btn-text-light;`
		425	`text-align: right;`
		426
		427	`.theme-dark & {`
		428	`color: $dm-body-color;`
		429	`}`
		430
		431	`&:hover {`
		432	`background-color: $drawer-nav-btn-bg-hover;`
		433	`color: $drawer-nav-btn-text-hover;`
		434	`text-decoration: none;`
		435
		436	`.theme-dark & {`
		437	`background-color: $primary-color-600;`
		438	`color: $primary-color-100;`
		439	`}`
		440	`}`
		441	`}`
		442
		443	`.rui-flatnavigation-sm {`
		444	`padding: 3px 1px;`
		445
		446	`.rui-sidebar-nav-icon svg {`
		447	`width: 18px;`
		448	`height: 18px;`
		449	`}`
		450
		451	`.rui-list-group-item {`
		452	`padding-top: 3px;`
		453	`padding-bottom: 3px;`
		454
		455	`font-size: $font-size-xs;`
		456	`color: $drawer-nav-btn-text-light;`
		457
		458	`.theme-dark & {`
		459	`color: $dm-body-color-light;`
		460	`}`
		461	`}`
		462	`}`
		463
		464	`.rui-drawer-nav-title {`
		465	`padding: 0 12px;`
		466	`font-size: 11px;`
		467	`font-weight: $font-weight-medium;`
		468	`text-transform: uppercase;`
		469	`opacity: .6;`
		470	`}`
		471
		472	`.rui-nav-item-container {`
		473	`display: flex;`
		474	`align-items: start;`
		475	`}`
		476
		477	`.rui-nav-list-group {`
		478	`font-size: $font-size-md;`
		479	`font-weight: $font-weight-medium;`
		480	`color: $drawer-nav-btn-text;`
		481
		482	`.theme-dark & {`
		483	`color: $dm-body-color-secondary;`
		484	`}`
		485	`}`
		486
		487
		488	`.nav-drawer-header {`
		489	`position: sticky;`
		490	`top: 0;`
		491	`margin: -15px -15px 30px;`
		492	`padding: $drawer-padding-x $drawer-padding-x 0 $drawer-padding-x;`
		493	`z-index: $zindex-sticky;`
		494	`}`
		495
		496
		497	`@include media-breakpoint-between(xs, sm) {`
		498
		499	`body.drawer-open-left,`
		500	`body.drawer-open-right {`
		501	`overflow: hidden;`
		502	`}`
		503	`}`
		504
		505	`.rui-custom-sidebar-content {`
		506	`font-size: $font-size-md;`
		507	`color: $drawer-nav-btn-text;`
		508
		509	`.theme-dark & {`
		510	`color: $dm-body-color-light;`
		511	`}`
		512	`}`
		513
		514	`/* Course Index */`
		515	`.drawer-course-index {`
		516	`overflow: hidden;`
		517	`position: fixed;`
		518
		519	`@include media-breakpoint-up(lg) {`
		520	`padding: 20px 10px 20px 20px;`
		521	`top: 60px;`
		522	`}`
		523
		524	`@include media-breakpoint-between(xs, md) {`
		525	`top: 0;`
		526	`padding: 10px;`
		527	`}`
		528
		529	`background-color: $container-bg;`
		530	`border-right: 1px solid $border-color;`
		531
		532	`z-index: $zindex-fixed +91;`
		533	`transition: left 350ms ease,`
		534	`left 350ms ease;`
		535
		536	`@include media-breakpoint-up(lg) {`
		537	`width: $drawer-left-width;`
		538	`height: 100%;`
		539	`left: -100%;`
		540	`max-height: calc(100vh - 60px);`
		541	`}`
		542
		543	`@include media-breakpoint-between(xs, md) {`
		544	`width: 100%;`
		545	`height: 100%;`
		546	`left: -100%;`
		547	`border: 0;`
		548	`z-index: 99999;`
		549	`}`
		550
		551	`.theme-dark & {`
		552	`background-color: $dm-body-bg;`
		553	`border-color: $dm-border-color;`
		554	`}`
		555
		556	`&.show {`
		557	`left: 0;`
		558	`}`
		559	`}`
		560
		561	`.btn-drawer {`
		562	`position: fixed;`
		563	`z-index: $zindex-fixed;`
		564	`top: 73px;`
		565
		566	`@include media-breakpoint-up(md) {`
		567	`left: 16px;`
		568	`}`
		569
		570	`@include media-breakpoint-between(xs, sm) {`
		571	`left: 10px;`
		572	`top: auto;`
		573	`bottom: 90px;`
		574	`}`
		575
		576	`display: flex;`
		577	`align-items: center;`
		578	`justify-content: center;`
		579
		580	`padding: 0;`
		581	`width: 40px;`
		582	`height: 40px;`
		583
		584	`background-color: $gray-900;`
		585	`border: 1px solid $gray-900;`
		586	`color: $gray-100;`
		587	`border-radius: $btn-border-radius;`
		588
		589	`transition: $transition-base;`
		590
		591	`&:hover {`
		592	`background-color: $primary-color-600;`
		593	`border-color: $primary-color-600;`
		594	`color: $primary-color-100;`
		595
		596	`.theme-dark & {`
		597	`background-color: $primary-color-600;`
		598	`border-color: $primary-color-600;`
		599	`color: $primary-color-100;`
		600	`}`
		601	`}`
		602
		603
		604	`@include media-breakpoint-between(xs, md) {`
		605	`right: auto;`
		606	`}`
		607
		608	`.theme-dark & {`
		609	`background-color: $dm-gray-100;`
		610	`border-color: $dm-gray-100;`
		611	`color: $dm-body-color;`
		612	`}`
		613	`}`
		614
		615	`.rui-lang-btn {`
		616	`display: flex;`
		617	`align-items: center;`
		618	`justify-content: center;`
		619
		620	`min-width: 40px;`
		621	`width: max-content;`
		622	`min-height: 40px;`
		623
		624	`border: none;`
		625	`border-radius: $btn-border-radius;`
		626	`font-size: $font-size-xs;`
		627	`font-weight: $font-weight-medium;`
		628
		629	`background-color: $topbar-btn;`
		630	`color: $topbar-btn-text;`
		631
		632	`.theme-dark & {`
		633	`background-color: $dm-topbar-btn;`
		634	`color: $dm-topbar-btn-text;`
		635	`}`
		636
		637	`&:hover {`
		638	`background-color: $topbar-btn-hover;`
		639	`color: $topbar-btn-hover-text;`
		640
		641	`.theme-dark & {`
		642	`background-color: $dm-topbar-btn-hover;`
		643	`color: $dm-topbar-btn-hover-text;`
		644	`}`
		645	`}`
		646	`}`
		647
		648	`@mixin drawer() {`
		649	`background-color: $drawer-bg-color;`
		650	`z-index: $zindex-modal;`
		651	`position: fixed;`
		652
		653	`transition: all 150ms ease;`
		654
		655	`@include media-breakpoint-up(lg) {`
		656	`height: calc(100vh - #{$navbar-height});`
		657	`}`
		658
		659	`@include media-breakpoint-between(xs, md) {`
		660	`height: calc(100vh - 20px);`
		661	`}`
		662
		663	`.theme-dark & {`
		664	`background-color: $dm-drawer-bg-color;`
		665	`}`
		666
		667	`&.not-initialized {`
		668	`display: none;`
		669	`}`
		670	`}`
		671
		672	`@mixin drawertypes() {`
		673	`&.drawer-right {`
		674	`@include media-breakpoint-up(lg) {`
		675	`top: $navbar-height;`
		676	`border-left: 1px solid $border-color;`
		677
		678	`.theme-dark & {`
		679	`border-color: $dm-border-color;`
		680	`}`
		681	`}`
		682
		683	`@include media-breakpoint-between(xs, md) {`
		684	`top: 10px;`
		685	`border-radius: $btn-border-radius;`
		686	`}`
		687
		688	`@include media-breakpoint-up(md) {`
		689	`width: $drawer-right-width;`
		690	`}`
		691
		692	`@include media-breakpoint-between(xs,sm) {`
		693	`width: calc(100% - 20px);`
		694	`max-width: 410px;`
		695	`}`
		696
		697	`max-width: 100%;`
		698	`right: calc(-#{$drawer-right-width} - 10px);`
		699	`visibility: hidden;`
		700	`@include box-shadow($box-shadow-drawer-right);`
		701
		702	`&.show {`
		703	`right: 0;`
		704	`visibility: visible;`
		705
		706	`@include media-breakpoint-between(xs, md) {`
		707	`right: 10px;`
		708	`}`
		709	`}`
		710
		711	`.drawertoggle {`
		712	`margin-left: auto;`
		713	`margin-right: 5px;`
		714	`}`
		715	`}`
		716
		717	`&.drawer-left {`
		718	`width: $drawer-left-width;`
		719	`max-width: $drawer-left-width;`
		720	`left: calc(-#{$drawer-left-width} + -10px);`
		721	`visibility: hidden;`
		722	`@include box-shadow($box-shadow-drawer-left);`
		723
		724	`border-right: 1px solid $border-color;`
		725
		726	`.theme-dark & {`
		727	`border-color: $dm-border-color;`
		728	`}`
		729
		730	`&.show {`
		731	`visibility: visible;`
		732
		733	`@include media-breakpoint-up(lg) {`
		734	`left: 0;`
		735	`}`
		736
		737	`@include media-breakpoint-between(xs, md) {`
		738	`top: 10px;`
		739	`left: 10px;`
		740	`border-radius: $btn-border-radius;`
		741	`max-width: 410px;`
		742	`}`
		743
		744	`@include media-breakpoint-between(xs, sm) {`
		745	`padding: 10px 10px 80px;`
		746	`width: calc(100% - 20px);`
		747	`}`
		748	`}`
		749
		750	`.drawertoggle {`
		751	`margin-right: auto;`
		752	`margin-left: 5px;`
		753	`}`
		754	`}`
		755
		756	`&.drawer-bottom {`
		757	`bottom: -110%;`
		758
		759	`&.show {`
		760	`bottom: 0;`
		761	`}`
		762	`}`
		763	`}`
		764
		765	`.drawer {`
		766	`@include drawer();`
		767	`@include drawertypes();`
		768
		769	`&.message-drawer {`
		770
		771	`@include media-breakpoint-up(md) {`
		772	`border-radius: $btn-border-radius;`
		773	`}`
		774
		775	`right: 10px;`
		776	`}`
		777	`}`
		778
		779	`.drawer-right,`
		780	`.drawer-left {`
		781	`top: $navbar-height;`
		782
		783	`@include media-breakpoint-between(xs, md) {`
		784	`box-shadow: $box-shadow-lg;`
		785	`}`
		786	`}`
		787
		788	`@include media-breakpoint-up(lg) {`
		789	`.drawer {`
		790	`z-index: 1230;`
		791
		792	`// Workaround to display the skip link elements from the blocks drawer infront of the navbar.`
		793	`&#theme-drawers-blocks:focus-within {`
		794	`position: absolute;`
		795
		796	`.drawercontent {`
		797	`z-index: auto;`
		798	`}`
		799	`}`
		800
		801	`&.not-initialized {`
		802	`display: block;`
		803	`}`
		804	`}`
		805	`}`
		806
		807	`@include media-breakpoint-between(xs, sm) {`
		808	`.drawer {`
		809	`border-radius: 0;`
		810	`}`
		811	`}`

Proyectos de Subversion Moodle

(root)/theme/monocolor/scss/moodle/drawer.scss – Rev 1