diff options
Diffstat (limited to 'resources/assets/stylesheets/scss/courseware')
5 files changed, 59 insertions, 41 deletions
diff --git a/resources/assets/stylesheets/scss/courseware/editbar.scss b/resources/assets/stylesheets/scss/courseware/editbar.scss new file mode 100644 index 0000000..0a394ef --- /dev/null +++ b/resources/assets/stylesheets/scss/courseware/editbar.scss @@ -0,0 +1,14 @@ +.cw-editbar-wrapper { + display: flex; + flex-direction: row; + position: absolute; + top: 75px; + right: 0; + + .cw-editbar { + background-color: #fbfbfc; + border: solid thin #ededed; + width: 50px; + } + +}
\ No newline at end of file diff --git a/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss b/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss index 1f62e1c..9609d7f 100644 --- a/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss +++ b/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss @@ -33,20 +33,11 @@ $consum_ribbon_width: calc(100% - 58px); z-index: 40; } -.cw-ribbon-sticky-top { - position: fixed; - top: 40px; - height: 20px; - width: calc(100% - 314px); - background-color: var(--white); - z-index: 39; -} - .cw-ribbon-sticky-bottom { position: fixed; - top: 110px; + top: 85px; height: 16px; - width: calc(100% - 314px); + width: calc(100% - 30px); background-color: var(--white); z-index: 39; } @@ -60,16 +51,16 @@ $consum_ribbon_width: calc(100% - 58px); flex-wrap: wrap; height: auto; min-height: 30px; - border: solid thin var(--dark-gray-color-30); - margin-bottom: 15px; + margin: -15px -15px 15px -15px; padding: 1em; justify-content: space-between; - background-color: var(--dark-gray-color-5); + background-color: #ededed; &.cw-ribbon-sticky { position: fixed; - top: 50px; - width: calc(100% - 346px); + top: 40px; + width: calc(100% - 30px); + margin: 0 -15px; z-index: 40; } @@ -203,10 +194,11 @@ $consum_ribbon_width: calc(100% - 58px); .cw-ribbon-tools { background-color: var(--white); border: solid thin var(--content-color-40); + border-top: none; box-shadow: 2px 2px var(--dark-gray-color-30); position: absolute; right: -570px; - top: 15px; + top: 0; height: 100%; max-width: calc(100% - 28px); display: flex; @@ -216,7 +208,7 @@ $consum_ribbon_width: calc(100% - 58px); &.unfold { right: 0px; - margin-right: 15px; + margin-right: 0; } &.cw-ribbon-tools-consume { diff --git a/resources/assets/stylesheets/scss/courseware/layouts/tree.scss b/resources/assets/stylesheets/scss/courseware/layouts/tree.scss index 77219bc..10469a3 100644 --- a/resources/assets/stylesheets/scss/courseware/layouts/tree.scss +++ b/resources/assets/stylesheets/scss/courseware/layouts/tree.scss @@ -6,7 +6,11 @@ &.cw-tree-root-list { padding-left: 0; - > li.cw-tree-item { + > li.cw-tree-item.cw-tree-item-adder { + margin-top: 28px; + } + + > li.cw-tree-item:not(.cw-tree-item-adder) { > .cw-tree-item-wrapper { display: none; } diff --git a/resources/assets/stylesheets/scss/courseware/structural-element.scss b/resources/assets/stylesheets/scss/courseware/structural-element.scss index 9bf9dec..4ab4906 100644 --- a/resources/assets/stylesheets/scss/courseware/structural-element.scss +++ b/resources/assets/stylesheets/scss/courseware/structural-element.scss @@ -49,6 +49,12 @@ } } + .cw-page-content { + margin: 0 auto; + max-width: $max-content-width; + width: calc(100% - 120px); + } + .cw-structural-element-feedback-wrapper, .cw-structural-element-comments-wrapper { max-width: calc(1095px - 2px); @@ -57,7 +63,7 @@ } .cw-container-wrapper { - max-width: $max-content-width; + width: 100%; margin: 0; padding: 0; display: flex; diff --git a/resources/assets/stylesheets/scss/courseware/toolbar.scss b/resources/assets/stylesheets/scss/courseware/toolbar.scss index 0670486..52fd15c 100644 --- a/resources/assets/stylesheets/scss/courseware/toolbar.scss +++ b/resources/assets/stylesheets/scss/courseware/toolbar.scss @@ -1,15 +1,23 @@ +.cw-toolbar-wrapper { + display: flex; + flex-direction: column; +} + .cw-toolbar { z-index: 30; display: flex; - position: fixed; - top: 0; - flex-direction: row; + position: absolute; + top: 75px; + flex-direction: row-reverse; justify-content: flex-end; - right: 0; - margin-left: 4px; - height: 600px; + left: 0; + + &.cw-toolbar-sticky { + position: fixed; + } .cw-toolbar-tools { + z-index: 31; width: 270px; min-height: 100%; border: solid thin var(--content-color-40); @@ -18,18 +26,18 @@ position: relative; padding: 0 4px; top: 0; - right: -270px; - transition: right 0.6s; + left: -270px; + transition: left 0.6s; &.hd { width: 480px; - right: -480px; + left: -480px; } &.wqhd { width: 558px; - right: -558px; + left: -558px; } &.unfold { - right: 0; + left: 0; } .cw-toolbar-tool-content { @@ -108,8 +116,11 @@ } } .cw-toolbar-folded-wrapper { + z-index: 32; display: flex; flex-direction: column; + background-color: #fbfbfc; + border: solid thin #ededed; } .cw-toolbar-button-wrapper { position: sticky; @@ -126,7 +137,7 @@ margin: 0 4px 0 4px; padding: 2px 8px 0 8px; border: none; - background-color: var(--white); + background-color: transparent; background-repeat: no-repeat; background-position: center center; cursor: pointer; @@ -141,15 +152,6 @@ border-bottom: solid 2px var(--base-color); } } - .cw-toolbar-spacer-right { - z-index: 39; - flex-shrink: 0; - position: relative; - background-color: var(--white); - width: 15px; - height: calc(100% + 2px); - } - .cw-toolbar-tools.hd { .cw-toolbar-button-wrapper { .cw-toolbar-button { |