NextERP/design-themes
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[IMP] theme_nano: update the theme

Browse Source 
This commit updates the theme to improve the design with new colors, new
pictures and new snippet customizations.

task-2590182

X-original-commit: 036df33043
Part-of: odoo/design-themes#501
This commit is contained in:
Cocographique
2021-08-01 21:13:17 +00:00
committed by qsm-odoo
parent 158003bad2
commit c4287ba0d4
34 changed files with 780 additions and 537 deletions
Download Patch File Download Diff File Expand all files Collapse all files
theme_nano/static/src/img/snippets/s_banner.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 156 KiB

theme_nano/static/src/img/snippets/s_carousel_01.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 127 KiB

After

Width:  |  Height:  |  Size: 148 KiB

theme_nano/static/src/img/snippets/s_cover.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 148 KiB

After

Width:  |  Height:  |  Size: 109 KiB

theme_nano/static/src/img/snippets/s_image_text.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 110 KiB

After

Width:  |  Height:  |  Size: 108 KiB

theme_nano/static/src/img/snippets/s_images_wall_01.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

theme_nano/static/src/img/snippets/s_images_wall_02.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 KiB

theme_nano/static/src/img/snippets/s_images_wall_03.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

theme_nano/static/src/img/snippets/s_images_wall_04.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

theme_nano/static/src/img/snippets/s_images_wall_05.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 188 KiB

theme_nano/static/src/img/snippets/s_images_wall_06.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 KiB

theme_nano/static/src/img/snippets/s_masonry_block_2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

theme_nano/static/src/img/snippets/s_parallax.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 111 KiB

After

Width:  |  Height:  |  Size: 127 KiB

theme_nano/static/src/img/snippets/s_three_columns_03.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 137 KiB

After

Width:  |  Height:  |  Size: 180 KiB

theme_nano/static/src/img/theme/21.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 111 KiB

theme_nano/static/src/js/tour.js
+20 -17
View File
@@ -1,42 +1,45 @@
odoo.define("theme_nano.tour.nano", function (require) {
"use strict";
/** @odoo-module */
const wTourUtils = require("website.tour_utils");
var tour = require("web_tour.tour");
import wTourUtils from 'website.tour_utils';
const snippets = [
{
id: 's_carousel',
name: 'Carousel',
id: 's_cover',
name: 'Cover',
},
{
id: 's_features',
name: 'Features',
},
{
id: 's_image_text',
name: 'Image - Text',
},
{
id: 's_text_block',
name: 'Text',
},
{
id: 's_three_columns',
name: 'Columns',
id: 's_images_wall',
name: 'Images Wall',
},
{
id: 's_parallax',
name: 'Parallax',
},
{
id: 's_references',
name: 'References',
},
];
wTourUtils.registerThemeHomepageTour("nano_tour", [
wTourUtils.dragNDrop(snippets[0]),
wTourUtils.clickOnText(snippets[0], 'h2', 'top'),
wTourUtils.clickOnText(snippets[0], 'h1', 'top'),
wTourUtils.goBackToBlocks(),
wTourUtils.dragNDrop(snippets[1]),
wTourUtils.dragNDrop(snippets[2]),
wTourUtils.dragNDrop(snippets[3]),
wTourUtils.dragNDrop(snippets[4]),
wTourUtils.clickOnSnippet(snippets[4], 'top'),
wTourUtils.clickOnSnippet(snippets[2], 'top'),
wTourUtils.changeBackgroundColor(),
wTourUtils.selectColorPalette(),
wTourUtils.goBackToBlocks(),
wTourUtils.dragNDrop(snippets[3]),
wTourUtils.dragNDrop(snippets[4]),
wTourUtils.dragNDrop(snippets[5]),
]);
});
theme_nano/static/src/scss/bootstrap_overridden.scss
Vendored
+49 -35
View File
@@ -3,74 +3,59 @@
//------------------------------------------------------------------------------//
// Headings
@if o-website-value('headings-font-number') == 1 {
// Roboto
@if o-website-value('headings-font') == 'Roboto' {
$o-theme-headings-font-weight: 500;
}
@else if o-website-value('headings-font-number') == 4 {
// Lato
@if o-website-value('headings-font') == 'Dosis' {
$o-theme-headings-font-weight: 400;
}
@else if o-website-value('headings-font') == 'Lato' {
$o-theme-headings-font-weight: 300;
}
@else if o-website-value('headings-font-number') == 5 {
// Advent Pro
$o-theme-h1-font-size-multiplier: 4;
$o-theme-h2-font-size-multiplier: 3.5;
@else if o-website-value('headings-font') == 'Advent Pro' {
$o-theme-headings-font-weight: 600;
}
@else if o-website-value('headings-font-number') == 6 {
// Oswald
$o-theme-h1-font-size-multiplier: 4;
$o-theme-h2-font-size-multiplier: 3.5;
}
// Body
@if o-website-value('font-number') == 1 {
// Roboto
@if o-website-value('font') == 'Roboto' {
$o-theme-font-weight-bold: 500;
}
@else if o-website-value('font-number') == 4 {
// Lato
@if o-website-value('font') == 'Dosis' {
$o-theme-font-weight-bold: 500;
}
@else if o-website-value('font') == 'Lato' {
$o-theme-font-weight-light: 300;
$o-theme-font-weight-bold: 600;
}
@else if o-website-value('font-number') == 5 {
// Advent Pro
@else if o-website-value('font') == 'Advent Pro' {
$o-theme-font-weight-bold: 600;
}
@else if o-website-value('font-number') == 6 {
// Oswald
@else if o-website-value('font') == 'Oswald' {
$o-theme-font-weight-light: 200;
$o-theme-font-weight-normal: 300;
$o-theme-font-weight-bold: 400;
}
@else if o-website-value('font-number') == 8 {
// Open Sans
@else if o-website-value('font') == 'Open Sans' {
$o-theme-font-weight-bold: 600;
}
@else if o-website-value('font-number') == 10 {
// Montserrat Alternates
@else if o-website-value('font') == 'Montserrat Alternates' {
$o-theme-font-weight-bold: 600;
}
// Buttons
@if o-website-value('buttons-font-number') == 1 {
// Roboto
@if o-website-value('buttons-font') == 'Roboto' {
$o-theme-btn-font-weight: 500;
}
@else if o-website-value('buttons-font-number') == 5 {
// Advent Pro
@else if o-website-value('buttons-font') == 'Advent Pro' {
$o-theme-btn-font-weight: 600;
}
@else if o-website-value('buttons-font-number') == 6 {
// Oswald
@else if o-website-value('buttons-font') == 'Oswald' {
$o-theme-btn-font-weight: 200;
}
@else if o-website-value('buttons-font-number') == 8 {
// Open Sans
@else if o-website-value('buttons-font') == 'Open Sans' {
$o-theme-btn-font-weight: 600;
}
@else if o-website-value('buttons-font-number') == 10 {
// Montserrat Alternates
@else if o-website-value('buttons-font') == 'Montserrat Alternates' {
$o-theme-btn-font-weight: 600;
}
@@ -80,3 +65,32 @@
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold: 200 !default;
// Typography
//
// Font, line-height, and color for body text, headings, and more.
$font-size-lg: o-website-value('font-size-base') * $o-theme-font-size-lg-multiplier !default;
$font-size-sm: o-website-value('font-size-base') * $o-theme-font-size-sm-multiplier !default;
$font-weight-light: $o-theme-font-weight-light !default;
$font-weight-normal: $o-theme-font-weight-normal !default;
$font-weight-bold: $o-theme-font-weight-bold !default;
$headings-font-weight: $o-theme-headings-font-weight !default;
// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
$input-btn-focus-width: 0 !default;
$input-focus-border-color: o-color('primary') !default;
$btn-font-weight: 400 !default;
$btn-box-shadow: none !default;
$input-color: o-color('o-cc1-text') !default;
$input-placeholder-color: o-color('500') !default;
// Cards
$card-border-width: 0 !default;
theme_nano/static/src/scss/primary_variables.scss
+78 -46
View File
@@ -4,27 +4,29 @@
$o-website-values-palettes: (
(
'color-palettes-name': 'nano-1',
'color-palettes-name': 'nano-1',
// Header
'header-template': 'sidebar',
'header-template': 'centered_logo',
'hamburger-type': 'off-canvas',
'hamburger-position': 'left',
'header-font-size': 1rem,
'header-links-style': 'fill',
'menu-border-radius': 0,
'menu-box-shadow': none,
// Font
'font': 'Nunito',
'font': 'Oxygen',
'headings-font': 'Nunito',
'navbar-font': 'Nunito',
'navbar-font': 'Oxygen',
'buttons-font': 'Nunito',
// Body
'font-size-base': 1rem,
'layout': 'postcard',
'btn-ripple': true,
// Footer
'footer-template': 'minimalist',
'footer-template': 'descriptive',
'footer-effect': 'slideout_slide_hover',
'footer-scrolltop': true,
),
@@ -45,7 +47,7 @@ $o-theme-font-configs: (
),
'Dosis': (
'family': ('Dosis', sans-serif),
'url': 'Dosis:300,300i,400,400i,700,700i',
'url': 'Dosis:300,400,500',
),
'Lato': (
'family': ('Lato', sans-serif),
@@ -54,16 +56,20 @@ $o-theme-font-configs: (
'Advent Pro': (
'family': ('Advent Pro', sans-serif),
'url': 'Advent+Pro:300,300i,400,400i,600,600i',
'base': (
'font-size-base': 1.125rem,
),
'properties' : (
'base': (
'font-size-base': 1.125rem,
),
)
),
'Oswald': (
'family': ('Oswald', sans-serif),
'url': 'Oswald:200,200i,400,400i,500,500i',
'base': (
'font-size-base': 1.25rem,
),
'properties' : (
'base': (
'font-size-base': 1.25rem,
),
)
),
'Oxygen': (
'family': ('Oxygen', sans-serif),
@@ -77,9 +83,9 @@ $o-theme-font-configs: (
'family': ('Merriweather', serif),
'url': 'Merriweather:300,300i,400,400i,700,700i',
),
'Montserrat Alternates': (
'family': ('Montserrat Alternates', sans-serif),
'url': 'Montserrat+Alternates:300,300i,400,400i,600,600i',
'Montserrat': (
'family': ('Montserrat', sans-serif),
'url': 'Montserrat:300,300i,400,400i,600,600i',
),
'Nunito': (
'family': ('Nunito', sans-serif),
@@ -87,6 +93,26 @@ $o-theme-font-configs: (
),
);
// Headings
$o-theme-h1-font-size-multiplier: 3;
$o-theme-h2-font-size-multiplier: 2.5;
$o-theme-headings-font-weight: 400;
// Texts
$o-theme-font-size-lg-multiplier: 1.25;
$o-theme-font-size-sm-multiplier: .875;
$o-theme-font-weight-light: 300;
$o-theme-font-weight-normal: 400;
$o-theme-font-weight-bold: 700;
// Buttons
$o-theme-btn-font-weight: 400;
//------------------------------------------------------------------------------//
// Colors
//------------------------------------------------------------------------------//
@@ -95,46 +121,46 @@ $o-theme-font-configs: (
$o-theme-color-palettes: map-merge($o-theme-color-palettes,
(
'nano-1': (
'alpha': #ed8558,
'beta': #74bcc5,
'gamma': #7cc086,
'delta': #afd5a6,
'epsilon': #f3da80,
'alpha': #ed8558,
'beta': #74bcc5,
'gamma': #7cc086,
'delta': #afd5a6,
'epsilon': #f3da80,
),
'nano-2': (
'alpha': #ed8c2b,
'beta': #cf4a30,
'gamma': #911146,
'delta': #35203b,
'epsilon': #88a825,
'alpha': #ed8c2b,
'beta': #cf4a30,
'gamma': #911146,
'delta': #35203b,
'epsilon': #88a825,
),
'nano-3': (
'alpha': #79bd8f,
'beta': #00a388,
'gamma': #046380,
'delta': #4bb5C1,
'epsilon': #beeb9f,
'alpha': #79bd8f,
'beta': #00a388,
'gamma': #046380,
'delta': #4bb5C1,
'epsilon': #beeb9f,
),
'nano-4': (
'alpha': #16c6cc,
'beta': #d72d3c,
'gamma': #ff6d3b,
'delta': #ffb733,
'epsilon': #ffd55c,
'alpha': #16c6cc,
'beta': #d72d3c,
'gamma': #ff6d3b,
'delta': #ffb733,
'epsilon': #ffd55c,
),
'nano-5': (
'alpha': #14212b,
'beta': #e6e2af,
'gamma': #c9de55,
'delta': #962d3e,
'epsilon': #413659,
'alpha': #14212b,
'beta': #e6e2af,
'gamma': #c9de55,
'delta': #962d3e,
'epsilon': #413659,
),
'nano-6': (
'alpha': #db5d6b,
'beta': #ea958e,
'gamma': #fffcdb,
'delta': #d4e090,
'epsilon': #79d4be,
'alpha': #db5d6b,
'beta': #ea958e,
'gamma': #fffcdb,
'delta': #d4e090,
'epsilon': #79d4be,
),
)
);
@@ -166,3 +192,9 @@ $o-color-palettes-compatibility-indexes: (
22: 'generic-16',
23: 'generic-17',
);
//------------------------------------------------------------------------------
// Shapes
//------------------------------------------------------------------------------
$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Bold/12_001', (1: rgba(0, 0, 0, .5), 2: rgba(0, 0, 0, .25)));