Skip to content
Snippets Groups Projects
Commit 5a55ae31 authored by Ron Lucke's avatar Ron Lucke
Browse files

Polishing: Contentbar 

Closes #4876

Merge request studip/studip!3669
parent 3883474e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
resources/assets/stylesheets/scss/contentbar.scss
+ 5
− 6
View file @ 5a55ae31
...@@ -80,8 +80,6 @@ ...@@ -80,8 +80,6 @@
} }
.contentbar-button-wrapper { .contentbar-button-wrapper {
height: 24px;
margin: 0 7px;
@-moz-document url-prefix() { @-moz-document url-prefix() {
&.contentbar-toc-wrapper { &.contentbar-toc-wrapper {
...@@ -97,15 +95,16 @@ ...@@ -97,15 +95,16 @@
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 24px; background-size: 24px;
border: none; border: solid thin var(--color--button-border);
border-radius: var(--border-radius-default);
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
height: 24px; height: 32px;
width: 24px; width: 32px;
&.contentbar-button-menu, &.contentbar-button-menu,
&.cw-ribbon-button-menu { &.cw-ribbon-button-menu {
@include background-icon(table-of-contents, $size: 24px); @include background-icon(table-of-contents);
} }
&.contentbar-button-zoom::before { &.contentbar-button-zoom::before {
......
resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss
+ 84
− 40
View file @ 5a55ae31
...@@ -75,6 +75,45 @@ $consum_ribbon_width: calc(100% - 58px); ...@@ -75,6 +75,45 @@ $consum_ribbon_width: calc(100% - 58px);
margin-bottom: 0; margin-bottom: 0;
} }
.cw-ribbon-button {
height: 24px;
width: 24px;
margin: 0 7px;
padding: 1px 2px;
border: none;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 24px;
cursor: pointer;
&.cw-ribbon-button-menu {
@include background-icon(table-of-contents);
}
&.cw-ribbon-button-prev {
@include background-icon(arr_1left, $size: 24px);
margin: 0 0.5em 0 0;
}
&.cw-ribbon-button-next {
@include background-icon(arr_1right, $size: 24px);
margin: 0 0.5em 0 0;
}
&.cw-ribbon-button-prev-disabled {
@include background-icon(arr_1left, inactive, 24px);
margin: 0 0.5em 0 0;
cursor: default;
}
&.cw-ribbon-button-next-disabled {
@include background-icon(arr_1right, inactive, 24px);
margin: 0 0.5em 0 0;
cursor: default;
}
}
.cw-ribbon-wrapper-left { .cw-ribbon-wrapper-left {
display: flex; display: flex;
gap: 1em; gap: 1em;
...@@ -155,49 +194,60 @@ $consum_ribbon_width: calc(100% - 58px); ...@@ -155,49 +194,60 @@ $consum_ribbon_width: calc(100% - 58px);
gap: 0.5em; gap: 0.5em;
align-items: center; align-items: center;
button { .contentbar-toc-wrapper {
border: none; margin-top: 4px;
@-moz-document url-prefix() {
&.contentbar-toc-wrapper {
margin-top: 0;
}
}
}
button:not(.action-menu-icon) {
height: 32px;
width: 32px;
border-radius: var(--border-radius-default);
border: solid thin var(--color--button-border);
background-color: transparent; background-color: transparent;
cursor: pointer; cursor: pointer;
}
}
.cw-ribbon-button { &:hover,
height: 24px; &:active,
width: 24px; &.active {
margin: 0 7px; background: var(--color--button-focus);
padding: 1px 2px; color: var(--color--font-inverted);
border: none; }
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 24px;
cursor: pointer;
&.cw-ribbon-button-menu { &.cw-ribbon-button-menu {
@include background-icon(table-of-contents, $size: 24px); @include background-icon(table-of-contents);
} background-repeat: no-repeat;
background-position: center;
&.cw-ribbon-button-prev { &:hover,
@include background-icon(arr_1left, $size: 24px); &:active,
margin: 0 0.5em 0 0; &.active {
@include background-icon(table-of-contents, info_alt);
}
}
} }
&.cw-ribbon-button-next { .action-menu:not(.is-open) {
@include background-icon(arr_1right, $size: 24px); border: solid thin var(--color--button-border);
margin: 0 0.5em 0 0; border-radius: var(--border-radius-default);
} padding: 5px;
&.cw-ribbon-button-prev-disabled { &:hover,
@include background-icon(arr_1left, inactive, 24px); &:active,
margin: 0 0.5em 0 0; &.active {
cursor: default; background: var(--color--button-focus);
}
&.cw-ribbon-button-next-disabled { .action-menu-icon span {
@include background-icon(arr_1right, inactive, 24px); background-color: var(--color--font-inverted);
margin: 0 0.5em 0 0; }
cursor: default; }
}
.action-menu.is-open .action-menu-icon {
margin: 6px;
} }
} }
} }
...@@ -382,13 +432,7 @@ $consum_ribbon_width: calc(100% - 58px); ...@@ -382,13 +432,7 @@ $consum_ribbon_width: calc(100% - 58px);
// Rules extracted from PHP contentbar for use in ContentBar.vue // Rules extracted from PHP contentbar for use in ContentBar.vue
.contentbar-button-wrapper { .contentbar-button-wrapper {
height: 24px;
margin: 0 7px;
@-moz-document url-prefix() { @-moz-document url-prefix() {
&.contentbar-toc-wrapper {
margin-top: -4px;
}
&.contentbar-action-menu-wrapper { &.contentbar-action-menu-wrapper {
margin-top: 2px; margin-top: 2px;
} }
......
resources/assets/stylesheets/scss/responsive.scss
+ 3
− 3
View file @ 5a55ae31
...@@ -411,14 +411,14 @@ $sidebarOut: -330px; ...@@ -411,14 +411,14 @@ $sidebarOut: -330px;
} }
.cw-ribbon-tools { .cw-ribbon-tools {
right: 16px; right: 4px;
} }
} }
#toc { #toc {
margin-right: -2px; margin-right: -14px;
margin-top: -7px; margin-top: -3px;
} }
#main-footer { #main-footer {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment