odoo18/addons_extensions/knowledge/static/src/scss/knowledge_views.scss

464 lines
13 KiB
SCSS

.o_knowledge_article_view_form_view {
--editor-gutter-size: 2rem;
--o-view-nocontent-zindex: 1; // ensure that the no-content helper will have a z-index of 1
.o_scroll_view {
@include o-position-absolute(0, 0, 0, 0);
overflow-y: auto;
overflow-x: hidden;
}
.o_knowledge_header {
.o_hierarchy_item {
max-width: 40%;
}
.o_form_status_indicator_buttons.invisible {
width: 0;
}
.o_hierarchy_article_name input {
&:hover, &:focus {
border-bottom: $input-border-width solid $o-brand-primary !important;
border-top: $input-border-width solid transparent !important; // keeps input centered
}
}
}
span.o_knowledge_add_properties {
cursor: not-allowed;
}
.o_knowledge_editor .o_field_html .note-editable{
padding-top: 0px;
}
.o_knowledge_icon.o_large,
.o_knowledge_editor .o_field_html .note-editable,
.o_knowledge_editor .o_field_html .o_readonly,
.o_knowledge_editor .o_field_html .o_knowledge_helper {
padding-left: var(--editor-gutter-size) !important;
padding-right: calc(var(--editor-gutter-size) + 40px) !important;
}
.o_knowledge_article_view_form_dynamic_width ~ .o_knowledge_icon,
.o_knowledge_article_view_form_dynamic_width ~ .o_knowledge_editor .o_field_html .note-editable,
.o_knowledge_article_view_form_dynamic_width ~ .o_knowledge_editor .o_field_html .o_readonly,
.o_knowledge_article_view_form_dynamic_width ~ .o_knowledge_editor .o_field_html .o_knowledge_helper {
width: 100%;
max-width: calc(750px + 2 * var(--editor-gutter-size));
margin-left: auto;
margin-right: auto;
}
// = Sidebar
// --------------------------------------------------------------------------
.o_knowledge_sidebar {
.o_scroll_view {
max-height: 100%;
}
.o_section .o_tree {
min-height: 2rem;
}
.o_knowledge_tree {
user-select: none;
}
.o_article_emoji_dropdown {
> a {
width: 1.5em;
}
}
.o_article_emoji {
height: 100%;
display: inline-block;
}
.o_article:not(.o_dragged) > div {
&.o_article_active > div {
background-color: rgba($knowledge-bg--active, 0.2);
&:hover {
background-color: rgba($knowledge-bg--active, 0.3);
}
.o_article_emoji:hover,
.o_article_create:hover {
background-color: rgba($knowledge-bg--active, 0.4);
}
.o_article_emoji:active,
.o_article_create:active {
background-color: rgba($knowledge-bg--active, 0.5);
}
}
&:not(.o_article_active) > div {
&:hover {
background-color: rgba($knowledge-bg--hover, 0.3);
}
.o_article_emoji:hover,
.o_article_create:hover {
background-color: rgba($knowledge-bg--hover, 0.4);
}
.o_article_emoji:active,
.o_article_create:active {
background-color: rgba($knowledge-bg--hover, 0.5);
}
}
.o_article_name:active::before {
@include o-position-absolute(0, 0, 0, 0);
z-index: -1;
content: '';
}
}
.o_article.o_dragged {
.o_article_handle {
background-color: transparent !important;
}
}
.o_article > div {
position: relative;
z-index: 0;
}
.o_section_header:not(:hover) .o_section_create,
.o_section_header:not(:hover) .o_knowledge_join_article_members,
.o_article_handle > div:not(:hover) .o_article_create {
visibility: hidden;
}
.o_section_create:hover, .o_knowledge_join_article_members:hover {
background-color: rgba($knowledge-bg--active, 0.4);
}
.o_article_name a {
color: inherit;
}
.o_knowledge_sidebar_trash {
ul {
display: none;
}
bottom: 0px;
.btn {
margin-left: $input-btn-padding-x * -1;
}
}
.o_knowledge_tree.o_dragging {
.o_knowledge_sidebar_trash {
&:hover > div {
outline: solid 3px deepskyblue;
pointer-events: none;
}
}
li >:not(ul) {
pointer-events: none;
}
}
}
.o_knowledge_body {
.o_knowledge_icon {
font-size: 3em;
line-height: normal;
margin-top: map-get($spacers, 3);
margin-bottom: 0;
.o_article_emoji {
position: relative;
}
}
.o_widget_knowledge_cover + .o_knowledge_icon {
margin-top: -0.7em;
}
}
.o_knowledge_chatter {
.o_FormRenderer_chatterContainer {
padding: 0;
}
li.nav-item {
display: none;
}
}
.dropdown-menu.o_knowledge_more_options_panel {
min-width: 250px;
transform: translate3d(0px, 30px, 0px) !important;
.o_knowledge_more_options_panel_image,
.o_knowledge_more_options_panel_icon {
width: 3rem;
height: 3rem;
object-fit: cover;
}
.o_knowledge_more_options_panel_image:hover {
cursor: pointer;
filter: brightness(75%);
}
}
.dropdown-menu.o_knowledge_share_panel {
width: 420px;
overflow-x: hidden;
overflow-y: auto;
right: 0;
.form-switch .form-check-input {
margin-left: 0;
cursor: pointer;
}
.o_knowledge_share_panel_image,
.o_knowledge_share_panel_icon {
width: 30px;
height: 30px;
}
.o_knowledge_share_panel_image {
object-fit: cover;
}
.o_knowledge_share_panel_invite .form-control {
color: $gray-400 !important;
}
}
.dropdown-menu.o_knowledge_more_options_panel,
.dropdown-menu.o_knowledge_share_panel {
max-width: 100vw;
}
.o_knowledge_properties {
min-width: 250px;
width: 25%;
background: var(--knowledge-properties-bg, $o-gray-100);
.o_properties_helper {
height: 60%;
min-height: 300px;
background: var(--knowledge-properties-bg, $o-gray-100);
.o_view_nocontent_smiling_face:before {
@extend %o-nocontent-init-image;
width: 120px;
height: 140px;
background: transparent url(/web/static/img/smiling_face.svg) no-repeat center;
}
}
.o_properties_helper + .o_field_properties {
.o_field_property_add {
text-align: center;
}
}
.o_inner_group {
width: 100%;
display: block;
}
.o_input,
.o_field_property_tag,
.o_field_property_many2one_value:not(:empty),
.o_field_property_many2many_value:not(:empty) {
border-bottom: $input-border-width solid $o-gray-300;
}
.o_input:focus,
.o_field_property_tag:focus-within,
.o_field_property_many2one_value:not(:empty):focus-within,
.o_field_property_many2many_value:not(:empty):focus-within {
border-bottom: $input-border-width solid $o-brand-primary;
}
.o_input_dropdown {
input {
border: 0 !important;
}
}
.o_property_field {
display: block !important;
&.o_property_folded {
display: none !important;
}
}
.o_field_property_add {
margin-left: 0 !important;
button {
background-color: transparent;
border-color: transparent;
&:hover {
background-color: var(--knowledge-properties-btn-bg, $o-gray-200);
border-color: var(--knowledge-properties-btn-bg, $o-gray-200);
}
}
}
.o_properties_external_button {
background: transparent;
border: 0;
}
}
.o_knowledge_comments_panel {
.o_comments_helper {
height: 60%;
min-height: 300px;
.o_view_nocontent_smiling_face:before {
@extend %o-nocontent-init-image;
width: 120px;
height: 140px;
background: transparent url(/web/static/img/smiling_face.svg) no-repeat center;
}
}
}
}
.o_knowledge_select_menu,
.o_knowledge_select_menu_dropdown {
img {
width: 20px;
height: 20px;
}
}
.o_knowledge_article_kanban_view .o_kanban_renderer {
.o_knowledge_kanban_card {
min-height: 6rem;
}
.o_kanban_quick_create {
// as quick create cards don't have as much space as forms, make properties take all
// available width, use 2 lines instead of 1 and remove draggable handle to save space
.o_field_properties .o_inner_group {
width: 100% !important;
.o_property_field.o_wrap_label {
display: block !important;
}
i.oi-draggable {
display: none;
}
}
}
}
.o_knowledge_article_view_calendar_embedded_view tr:not(.fc-scrollgrid-section-liquid) .fc-scroller {
overflow: hidden !important // FC adds inline style
}
.o_knowledge_article_view_calendar_embedded_view .overflow-hidden {
// remove the overflow-hidden when inside embed
overflow: unset !important;
}
.o_knowledge_toggle_favorite {
i.fa {
font-size: 16px;
}
i.fa-star-o {
@include o-hover-text-color($o-main-color-muted, $o-main-favorite-color);
}
i.fa-star {
color: $o-main-favorite-color;
}
}
.o_knowledge_add_people_input {
.o_field_tags {
width: 100%;
}
}
.o_command_palette {
.o_command_palette_box_header {
min-height: 30px;
}
}
// Media queries:
@include media-breakpoint-up(lg) {
.o_knowledge_form_view {
.o_scroll_view_lg {
@include o-position-absolute(0, 0, 0, 0);
overflow-y: auto;
overflow-x: hidden;
}
.o_knowledge_chatter {
border-left: 1px solid $border-color;
min-width: 400px;
}
.o_widget_knowledge_comments_panel {
height: 100%;
overflow-y: auto;
}
}
}
@include media-breakpoint-down(xl) {
.o_knowledge_form_view {
.o_scroll_view_lg, .o_knowledge_properties {
width: 100%;
}
.o_knowledge_chatter, .o_knowledge_properties, .o_knowledge_comments_panel {
border-top: 1px solid $border-color;
}
.o_knowledge_properties {
.o_property_field {
label {
font-size: $o-font-size-base;
}
}
}
}
}
@include media-breakpoint-up(sm) {
.o_knowledge_article_view_form_view {
.o_knowledge_body {
.o_knowledge_icon {
font-size: 5em;
}
}
}
}
@include media-breakpoint-up(md) {
.o_knowledge_sidebar {
transition: width 0.15s linear;
width: clamp(200px, var(--knowledge-article-sidebar-size), 35%);
}
}
@include media-breakpoint-down(md) {
.o_knowledge_form_view {
--editor-gutter-size: 1rem;
&:not(.o_toggle_aside) {
.o_knowledge_backdrop {
display: none;
}
.o_knowledge_sidebar {
transform: translateX(-100%);
}
}
.o_knowledge_sidebar,
.o_knowledge_main {
transition: transform .2s ease;
}
.o_knowledge_sidebar {
@include o-position-absolute(0, 50px, 0, 0);
z-index: 3; // should be greater than the backdrop z-index
}
.o_knowledge_backdrop {
@include o-position-absolute(0, 0, 0, 0);
background: rgba(0, 0, 0, .3);
z-index: 2; // should be greater than the action helper z-index
}
}
}
@media (hover: hover) { // Devices supporting hover
.o_knowledge_article_view_form_view {
.o_knowledge_edit_cover_buttons {
transition: opacity 0.3s ease-in-out;
}
.o_knowledge_cover:not(:hover) .o_knowledge_edit_cover_buttons {
opacity: 0;
}
.o_section_header:not(:hover) .o_section_create,
.o_section_header:not(:hover) .o_knowledge_join_article_members {
visibility: hidden;
}
.o_article_handle > div:not(:hover) .o_article_create {
display: none;
}
}
}