236 lines
6.7 KiB
Plaintext
236 lines
6.7 KiB
Plaintext
// VARIABLES
|
|
@o-base-settings-mobile-tabs-height: 40px;
|
|
@o-base-settings-mobile-tabs-overflow-gap: 3%;
|
|
|
|
// MIXINS
|
|
.o-base-settings-horizontal-padding(@padding-base: @padding-small-vertical) {
|
|
padding: @padding-base @flectra-horizontal-padding;
|
|
|
|
@media (min-width: @screen-lg-min) {
|
|
padding-left: @flectra-horizontal-padding*2;;
|
|
}
|
|
}
|
|
|
|
// Use a very specif selector to overwrite generic form-view rules
|
|
.o_form_view.o_form_nosheet.o_base_settings {
|
|
.o-flex-display();
|
|
.o-flex-flow(column, nowrap);
|
|
padding: 0px;
|
|
}
|
|
|
|
// BASE SETTINGS LAYOUT
|
|
.o_base_settings {
|
|
height: 100%;
|
|
|
|
@media (max-width: @screen-xs-max) {
|
|
.o-flex-flow(column, nowrap);
|
|
}
|
|
|
|
.o_control_panel {
|
|
.o_panel {
|
|
.o-flex-display();
|
|
.o-flex-flow(row, wrap);
|
|
margin-bottom: @flectra-sheet-vpadding*0.5;
|
|
width: 100%;
|
|
|
|
.title, .o_setting_search {
|
|
.o-flex(1, 0, auto);
|
|
width: @screen-xs-min*0.5;
|
|
}
|
|
|
|
.o_setting_search {
|
|
position: relative;
|
|
|
|
.searchInput {
|
|
height: 28px;
|
|
padding: 0px;
|
|
border: 0px;
|
|
border-bottom: 1px solid @gray-lighter-darker;
|
|
border-color: @gray;
|
|
box-shadow: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.searchIcon {
|
|
.o-position-absolute(4px, 0);
|
|
color: @gray;
|
|
}
|
|
}
|
|
}
|
|
|
|
.o_form_statusbar {
|
|
padding: 0;
|
|
margin: 0;
|
|
border: 0;
|
|
|
|
.oe_highlight, .oe_link {
|
|
padding: @padding-small-vertical @padding-small-horizontal;
|
|
}
|
|
|
|
.oe_link {
|
|
.o-hover-text-color(@link-color, @link-hover-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.o_setting_container {
|
|
.o-flex-display();
|
|
.o-flex(1, 1, auto);
|
|
|
|
overflow: auto;
|
|
|
|
@media (max-width: @screen-xs-max) {
|
|
.o-flex-flow(column, nowrap);
|
|
}
|
|
|
|
.settings_tab {
|
|
.o-flex-display();
|
|
.o-flex(0, 0, auto);
|
|
.o-flex-flow(column, nowrap);
|
|
background: @gray-dark;
|
|
overflow: auto;
|
|
padding-top: @flectra-horizontal-padding*0.5;
|
|
|
|
@media (max-width: @screen-xs-max) {
|
|
.o-flex(0, 0, @o-base-settings-mobile-tabs-height);
|
|
.o-inline-flex-display();
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
}
|
|
|
|
.selected {
|
|
background-color: @gray-darker;
|
|
box-shadow: inset 3px 0 0 @flectra-brand-optional;
|
|
|
|
.app_name {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.tab {
|
|
.o-flex-display();
|
|
padding: 0 @flectra-horizontal-padding*2 0 @flectra-horizontal-padding;
|
|
height: 40px;
|
|
color: @gray-lighter-darker;
|
|
font-size: 13px;
|
|
line-height: 40px;
|
|
cursor: pointer;
|
|
|
|
.icon {
|
|
width: 23px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
// Mobile Tabs
|
|
@media (max-width: @screen-xs-max) {
|
|
display: block;
|
|
.o-position-absolute(@left:100%);
|
|
.size(auto, @o-base-settings-mobile-tabs-height);
|
|
padding: @o-base-settings-mobile-tabs-height*0.25 @o-base-settings-mobile-tabs-height*0.4;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: inherit;
|
|
.o-transition(0.2s, all);
|
|
.o-transform(translate3d(0,0,0));
|
|
|
|
.app_name {
|
|
display: block;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&:after {
|
|
content: '';
|
|
background: @flectra-brand-optional;
|
|
opacity: 0;
|
|
.o-position-absolute(auto, 0, 0, 0);
|
|
.size(100%, 3px);
|
|
.o-transition(0.2s, all);
|
|
}
|
|
|
|
&.previous, &.before {
|
|
left: 0% - @o-base-settings-mobile-tabs-overflow-gap;
|
|
}
|
|
|
|
&.current {
|
|
left: 50%;
|
|
color: white;
|
|
|
|
// Reset default style for 'selected' tabs
|
|
box-shadow: none;
|
|
background: none;
|
|
|
|
&:after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&.next, &.after {
|
|
left: 100% + @o-base-settings-mobile-tabs-overflow-gap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.settings {
|
|
position: relative;
|
|
.o-flex(1, 1, 100%);
|
|
background-color: @flectra-view-background-color;
|
|
overflow: auto;
|
|
|
|
> .app_settings_block {
|
|
h2 {
|
|
margin-bottom: 0;
|
|
.o-base-settings-horizontal-padding();
|
|
background-color: @gray-lighter;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
|
|
&:first-of-type {
|
|
// Necessary to overwrite mt32 class
|
|
margin-top: 10px!important;
|
|
}
|
|
}
|
|
|
|
.o_settings_container {
|
|
max-width: @screen-md-min; // Provide a maximum container size to ensure readability
|
|
.o-base-settings-horizontal-padding(0);
|
|
}
|
|
}
|
|
|
|
.settingSearchHeader {
|
|
.o-flex-display();
|
|
margin: 30px 0 10px;
|
|
.o-base-settings-horizontal-padding();
|
|
background-color: @gray-lighter;
|
|
|
|
.icon {
|
|
.square(25px);
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.appName {
|
|
color: @headings-color;
|
|
font-size: 17px;
|
|
}
|
|
}
|
|
|
|
.notFound {
|
|
color : @text-muted;
|
|
text-align: center;
|
|
font-size: 25px;
|
|
padding-top: 50px;
|
|
}
|
|
|
|
.highlighter {
|
|
background: yellow;
|
|
}
|
|
}
|
|
|
|
.d-block {
|
|
display: block!important;
|
|
}
|
|
}
|
|
}
|