diff --git a/src/js/main.js b/src/js/main.js index 8adc2ccf..5e8b3f57 100755 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,3 +1,5 @@ +import "../vue/design/override-base-Canvas-elements.scss"; + import accordion from './modules/accordion.js'; import announcements from './modules/announcements.js'; import api from './api/api.js'; diff --git a/src/vue/components/course-modules/CourseModule.vue b/src/vue/components/course-modules/CourseModule.vue index cbd17c59..9d838c85 100644 --- a/src/vue/components/course-modules/CourseModule.vue +++ b/src/vue/components/course-modules/CourseModule.vue @@ -129,6 +129,8 @@ const toggleActiveModule = ({moduleId, isOpen}) => { letter-spacing:0.063rem ; display:flex; align-items: center; + white-space: normal !important; + word-wrap: break-word !important; } &--active { @@ -151,7 +153,7 @@ const toggleActiveModule = ({moduleId, isOpen}) => { &__child-nodes { list-style-type: none; background: map-get($color-palette-slate, background, 200); - padding: 0.2rem 0 0.2rem 1.5rem; + padding: 0.2rem 0 0.2rem 1.5rem; margin:0; @include hide-show-effect; &--hidden{ @@ -160,8 +162,3 @@ const toggleActiveModule = ({moduleId, isOpen}) => { } } - - - - - diff --git a/src/vue/design/override-base-Canvas-elements.scss b/src/vue/design/override-base-Canvas-elements.scss new file mode 100644 index 00000000..c5b6e0ee --- /dev/null +++ b/src/vue/design/override-base-Canvas-elements.scss @@ -0,0 +1,96 @@ +@import "colors.scss"; + +.ic-app-course-menu { + width: fit-content !important; + position: relative !important; +} + +#left-side { + width: fit-content !important; + padding-right: 2rem !important; + padding-top: 1rem !important; + border: none !important; + +} + +body.with-left-side:not(.useFullWidth) { + #application.ic-app { + #main { + min-width: auto; + margin: 0 auto; + } + } + } + +#right-side { + display: none !important; +} + +.ic-Layout-wrapper { + margin-left: auto !important; + display: flex !important; + flex-direction: column !important; + max-width: 60% !important; + min-height: 0; + +} + +.ic-Layout-watermark { + display: none !important; +} + + +#application.ic-app { + .ic-app-nav-toggle-and-crumbs { + display: none; // Hide toggling of menu + } + margin-left: auto !important; + margin-right: auto !important; + justify-content: center !important; + + display: flex !important; + flex-direction: column !important; + } + +.ic-app-main-content { + margin-top: 1rem !important; + width: fit-content !important; + min-height: 85vh !important; +} + +.ic-Layout-columns{ + width: 100% !important; + display: flex!important; + flex-direction: row-reverse; + align-content: flex-start; +} +#right-side.ic-app-main-content__secondary{ + display: hidden !important; +} +.ic-Layout-contentWrapper{ + min-width:1000px !important; + max-width: 85% !important; + padding-right: 4rem !important; + +} + +.with-left-side { + #main { + margin-left: 0; + } + + #wrapper { + margin-left: auto; + } + } + + @media screen and (max-width: 1240px) { + #wrapper { + margin: 10px; + } + + .with-left-side #wrapper { + + margin-left: 10px; + } + }