mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
move demo code to examples/
This commit is contained in:
Géry Debongnie
@@ -0,0 +1,341 @@
|
||||
// ------------------------------------------------------------------
|
||||
// Variables
|
||||
// ------------------------------------------------------------------
|
||||
$navbar-height: 46px;
|
||||
$main-color: #875a7b;
|
||||
$o-main-text-color: #666666;
|
||||
$o-notification-info-bg-color: #fcfbea;
|
||||
$o-notification-error-bg-color: #f16567;
|
||||
$o-view-background-color: white;
|
||||
$o-control-panel-background-color: $o-view-background-color;
|
||||
$o-horizontal-padding: 16px;
|
||||
$o-cp-breadcrumb-height: 30px;
|
||||
|
||||
// bootstrap overrides
|
||||
// this does not work: $breadcrumb-bg: $o-control-panel-background-color;
|
||||
.breadcrumb {
|
||||
background-color: white;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
// Mixins
|
||||
// ------------------------------------------------------------------
|
||||
@mixin o-webclient-padding(
|
||||
$top: 0px,
|
||||
$right: $o-horizontal-padding,
|
||||
$bottom: 0px,
|
||||
$left: $o-horizontal-padding
|
||||
) {
|
||||
padding-top: $top;
|
||||
padding-right: $right;
|
||||
padding-bottom: $bottom;
|
||||
padding-left: $left;
|
||||
}
|
||||
|
||||
@mixin o-text-overflow($display: inline-block, $max-width: 100%) {
|
||||
display: $display;
|
||||
max-width: $max-width;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: top; // To update display context changed by overflow:hidden
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
// CSS
|
||||
// ------------------------------------------------------------------
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/***** Generic stuff *****/
|
||||
.dropdown-toggle.o-no-caret::before,
|
||||
.dropdown-toggle.o-no-caret::after {
|
||||
content: normal;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
|
||||
&:hover {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
&:active {
|
||||
color: #212529;
|
||||
background-color: #dee2e6;
|
||||
}
|
||||
}
|
||||
|
||||
.o_hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/***** Web Client *****/
|
||||
.o_web_client {
|
||||
font-family: sans-serif;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: $navbar-height auto;
|
||||
}
|
||||
|
||||
/***** Navbar *****/
|
||||
.o_navbar {
|
||||
background-color: $main-color;
|
||||
color: white;
|
||||
display: flex;
|
||||
line-height: $navbar-height;
|
||||
font-size: 13px;
|
||||
|
||||
&.o_in_home {
|
||||
background-color: #bba2a5;
|
||||
a.o_title:hover {
|
||||
background-color: #bba2a5;
|
||||
}
|
||||
}
|
||||
|
||||
a.o_title {
|
||||
padding: 13px 16px 16px 20px;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.o_title:hover,
|
||||
a.o_menu_brand:hover {
|
||||
background-color: darken($main-color, 10);
|
||||
}
|
||||
|
||||
a.o_menu_brand {
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 1px 12px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
display: inline-flex;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.o_menu_sections > li {
|
||||
margin: 0 4px;
|
||||
&:hover {
|
||||
background-color: darken($main-color, 10);
|
||||
}
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
height: 40px;
|
||||
font-size: 15px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/***** Home Menu *****/
|
||||
.o_home_menu {
|
||||
background-color: #bba2a5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.o_apps {
|
||||
margin-top: 100px;
|
||||
width: 100%;
|
||||
max-width: 850px;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
.o_app {
|
||||
width: 16.6666667%;
|
||||
max-height: 110px;
|
||||
padding: 20px 0;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
color: white;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
|
||||
font-size: 15px;
|
||||
transition: background-color 0.3s ease 0s;
|
||||
&:hover {
|
||||
background-color: darken(#bba2a5, 4);
|
||||
}
|
||||
|
||||
.o_app_icon {
|
||||
max-width: 70px;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
box-shadow: 0 8px 0 -10px black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/***** Notifications *****/
|
||||
.o_notification_container {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
right: 5px;
|
||||
top: $navbar-height;
|
||||
bottom: 0;
|
||||
|
||||
.o_notification {
|
||||
padding: 0;
|
||||
margin: 5px 0 0 0;
|
||||
background-color: $o-notification-info-bg-color;
|
||||
box-shadow: 0px 0px 5px 1px $o-main-text-color;
|
||||
position: relative;
|
||||
|
||||
&.o_error {
|
||||
color: white;
|
||||
background-color: $o-notification-error-bg-color;
|
||||
}
|
||||
|
||||
.o_close {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.o_notification_title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding: 10px 10px 10px 20px;
|
||||
|
||||
font-weight: bold;
|
||||
|
||||
.o_icon {
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
.o_notification_content {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/***** Discuss *****/
|
||||
.o_discuss .o_content {
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
|
||||
.o_discuss_sidebar {
|
||||
background-color: #212529;
|
||||
flex: 0 0 300px;
|
||||
color: white;
|
||||
padding: 20px;
|
||||
}
|
||||
.o_discuss_content {
|
||||
padding: 20px;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/***** Loading indicator *****/
|
||||
.o_loading {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 1051; // lol...
|
||||
background-color: $main-color;
|
||||
color: white;
|
||||
padding: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/***** Control Panel *****/
|
||||
.o_control_panel {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
border-bottom: 1px solid darken($o-control-panel-background-color, 20%);
|
||||
@include o-webclient-padding($top: 10px, $bottom: 10px);
|
||||
background-color: $o-control-panel-background-color;
|
||||
|
||||
> .breadcrumb {
|
||||
width: 50%;
|
||||
font-size: 18px;
|
||||
|
||||
> li {
|
||||
@include o-text-overflow($max-width: 90%);
|
||||
|
||||
> a {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .o_cp_searchview {
|
||||
width: 50%;
|
||||
min-height: $o-cp-breadcrumb-height;
|
||||
}
|
||||
|
||||
> .o_cp_left {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 50%;
|
||||
margin-top: 5px;
|
||||
|
||||
> .o_cp_sidebar {
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
> .o_cp_right {
|
||||
display: flex;
|
||||
width: 50%;
|
||||
margin-top: 5px;
|
||||
|
||||
> .o_cp_pager {
|
||||
margin: auto 0 auto auto;
|
||||
padding-left: 5px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.o_pager_counter {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/***** Action Controller *****/
|
||||
.o_action_controller {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
padding: 0;
|
||||
|
||||
> .o_cp_controller {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
> .o_content {
|
||||
overflow: auto;
|
||||
flex: 1 1 100%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user