[IMP][CSS] Use BS font-weight variables and fix
Instead of redefining font-weights, we override the BS variables and add one extra font-weight in the newly-introduced extended utilities file. After this change all the variables needed replacing and some tweaking was needed to get the same or closely similar result as before this change. By doing so the font-weight classes in the typography file were obsolete and hence removed. Some other font-weight issues which were already there have been fixed in this commit too.
This commit is contained in:
Elisabeth Dickinson
Antoine Vandevenne (anv)
parent
f2c8501d8f
commit
21b1bf81b9
@ -7,7 +7,7 @@
|
||||
</div>
|
||||
<div class="d-flex flex-grow-1">
|
||||
{%- include "layout_templates/searchbox.html" %}
|
||||
<a class="btn btn-primary fw_semibold ms-auto d-none d-lg-inline-block" href="https://odoo.com/trial">{{ _('Try Odoo for FREE') }}</a>
|
||||
<a class="btn btn-primary fw_bold ms-auto d-none d-lg-inline-block" href="https://odoo.com/trial">{{ _('Try Odoo for FREE') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="o_subheader border-bottom d-flex">
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<div class="col-lg-6">
|
||||
<h2><a href="{{ pathto('applications') }}">{{ _("User Docs") }}</a></h2>
|
||||
<p class="text-muted">{{ _("Discover our guide to help you use and configure the platform, by applications.") }}</p>
|
||||
<h5 class="text-muted pt-3 text-uppercase fw_semibold">{{ _("Top Apps") }}</h5>
|
||||
<h5 class="text-muted pt-3 text-uppercase fw_bold">{{ _("Top Apps") }}</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a href="{{ pathto('applications/finance/accounting') }}" class="stretched-link">
|
||||
@ -34,7 +34,7 @@
|
||||
<div class="col-lg-6">
|
||||
<h2 class="border-top pt-4 pt-lg-0"><a href="{{ pathto('administration') }}">{{ _("Install and Maintain") }}</a></h2>
|
||||
<p class="text-muted">{{ _("Learn how to install, deploy and upgrade Odoo on premise or on Odoo.sh.") }}</p>
|
||||
<h5 class="text-muted pt-3 text-uppercase fw_semibold">{{ _("Top Links") }}</h5>
|
||||
<h5 class="text-muted pt-3 text-uppercase fw_bold">{{ _("Top Links") }}</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a href=" {{ pathto('administration/deployment/install') }} " class="stretched-link">
|
||||
@ -63,7 +63,7 @@
|
||||
<div class="col-lg-6">
|
||||
<h2 class="border-top pt-4"><a href="{{ pathto('developer') }}">{{ _("Developer") }}</a></h2>
|
||||
<p class="text-muted">{{ _("Learn to develop in Odoo by reading the framework references and programmer tutorials.") }}</p>
|
||||
<h5 class="text-muted pt-3 text-uppercase fw_semibold">{{ _("Top Links") }}</h5>
|
||||
<h5 class="text-muted pt-3 text-uppercase fw_bold">{{ _("Top Links") }}</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a href="{{ pathto('developer/howtos/rdtraining') }}" class="stretched-link">
|
||||
@ -95,7 +95,7 @@
|
||||
<div class="col-lg-6">
|
||||
<h2 class="border-top pt-4"><a href="{{ pathto('contributing') }}">{{ _("Contributing") }}</a></h2>
|
||||
<p class="text-muted">{{ _("You want to contribute to Odoo but don't know where to start? The tutorials and guidelines are there to help you make Odoo even better.") }}</p>
|
||||
<h5 class="text-muted pt-3 text-uppercase fw_semibold">{{ _("Top Links") }}</h5>
|
||||
<h5 class="text-muted pt-3 text-uppercase fw_bold">{{ _("Top Links") }}</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a href="{{ pathto('contributing/development/coding_guidelines') }}" class="stretched-link">
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
|
||||
//-- add icon
|
||||
|
||||
@mixin o-inline-icon($margin, $v-align: middle, $font-size: 1.5rem, $font-weight: $o-fw-regular) {
|
||||
@mixin o-inline-icon($margin, $v-align: middle, $font-size: 1.5rem, $font-weight: $font-weight-normal) {
|
||||
vertical-align: $v-align;
|
||||
margin: $margin;
|
||||
@include font-size($font-size);
|
||||
@ -92,7 +92,7 @@
|
||||
}
|
||||
|
||||
@mixin o-content-tab-selected {
|
||||
font-weight: $o-fw-bold;
|
||||
font-weight: $font-weight-bolder;
|
||||
border-bottom: 1px solid $white;
|
||||
border-left: 1px solid $o-gray-border;
|
||||
border-right: 1px solid $o-gray-border;
|
||||
@ -105,6 +105,6 @@
|
||||
background: $o-literals-bg;
|
||||
font-size: 0.875rem;
|
||||
font-family: 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
|
||||
font-weight: $o-fw-regular;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@ -32,50 +32,12 @@ html body{
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Font weight
|
||||
// Font Styling
|
||||
//------------------------------------------------------------------------------
|
||||
b, strong{
|
||||
font-weight: $o-fw-bold;
|
||||
font-weight: $font-weight-bolder;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: $o-fw-semibold;
|
||||
}
|
||||
|
||||
.fw_extralight {
|
||||
font-weight: $o-fw-extralight;
|
||||
}
|
||||
|
||||
.fw_light {
|
||||
font-weight: $o-fw-light;
|
||||
}
|
||||
|
||||
.fw_extralight, .fw_light{
|
||||
label, b, strong, a {
|
||||
font-weight: $o-fw-regular;
|
||||
}
|
||||
}
|
||||
|
||||
.fw_regular {
|
||||
font-weight: $o-fw-regular;
|
||||
}
|
||||
|
||||
.fw_medium {
|
||||
font-weight: $o-fw-medium;
|
||||
}
|
||||
|
||||
.fw_semibold {
|
||||
font-weight: $o-fw-semibold;
|
||||
}
|
||||
|
||||
.fw_bold {
|
||||
font-weight: $o-fw-bold;
|
||||
}
|
||||
|
||||
.fw_extrabold {
|
||||
font-weight: $o-fw-extrabold;
|
||||
}
|
||||
|
||||
.fw_black {
|
||||
font-weight: $o-fw-black;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
16
extensions/odoo_theme/static/scss/_utilities_extended.scss
Normal file
16
extensions/odoo_theme/static/scss/_utilities_extended.scss
Normal file
@ -0,0 +1,16 @@
|
||||
// Extend Utilities
|
||||
$utilities: () !default;
|
||||
$utilities: map-merge(
|
||||
$utilities,
|
||||
(
|
||||
"font-weight": map-merge(
|
||||
map-get($utilities, "font-weight"),
|
||||
(
|
||||
values: map-merge(
|
||||
map-get(map-get($utilities, "font-weight"), "values"),
|
||||
("medium" : $o-font-weight-medium)
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
);
|
||||
@ -8,14 +8,8 @@ $o-container-max-width-xxxl: 1560px;
|
||||
// ===============================================
|
||||
$o-font-family-serif: 'Roboto Slab', Georgia, "Times New Roman", Times, serif;
|
||||
|
||||
$o-fw_extralight: 200;
|
||||
$o-fw_light: 300;
|
||||
$o-fw-regular: 400;
|
||||
$o-fw-medium: 500;
|
||||
$o-fw-semibold: 600;
|
||||
$o-fw-bold: 700;
|
||||
$o-fw-extrabold: 800;
|
||||
$o-fw_black: 900;
|
||||
// Extra font added in custom utilities
|
||||
$o-font-weight-medium: 500;
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// icomoon icons
|
||||
|
||||
@ -50,7 +50,7 @@ $font-weight-lighter: 200;
|
||||
$font-weight-light: 300;
|
||||
$font-weight-normal: 400;
|
||||
$font-weight-bold: 600;
|
||||
$font-weight-bolder: 800;
|
||||
$font-weight-bolder: 700;
|
||||
|
||||
// Images
|
||||
|
||||
@ -60,7 +60,7 @@ $thumbnail-padding: .5rem;
|
||||
// For each of Bootstrap's buttons, define text, background, and border color.
|
||||
|
||||
$btn-font-size: .875rem;
|
||||
$btn-font-weight: $font-weight-medium;
|
||||
$btn-font-weight: 500;
|
||||
$btn-close-focus-shadow: 0 0 0 0 transparent;
|
||||
$btn-close-bg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" fill="#000000"><path d="M15,16c-.27,0-.54-.11-.73-.31l-4.21-4.44c-.38-.4-.36-1.03,.04-1.41s1.03-.36,1.41,.04l3.48,3.67,3.42-3.67c.38-.4,1.01-.42,1.41-.05,.4,.38,.42,1.01,.05,1.41l-4.15,4.44c-.19,.2-.45,.32-.73,.32h0Z"/><path d="M10.79,20.44c-.25,0-.49-.09-.69-.27-.4-.38-.42-1.01-.04-1.41l4.21-4.45c.19-.2,.45-.31,.73-.31h0c.28,0,.54,.12,.73,.32l4.15,4.45c.38,.4,.35,1.04-.05,1.41-.41,.38-1.04,.35-1.41-.05l-3.42-3.67-3.48,3.67c-.2,.21-.46,.31-.73,.31Z"/><path d="M15,28.37c-7.37,0-13.37-6-13.37-13.37S7.63,1.63,15,1.63s13.37,6,13.37,13.37-6,13.37-13.37,13.37Zm0-24.74C8.73,3.63,3.63,8.73,3.63,15s5.1,11.37,11.37,11.37,11.37-5.1,11.37-11.37S21.27,3.63,15,3.63Z"/></svg>');
|
||||
$btn-close-width: 2rem;
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
@import "scss/bootstrap_overridden";
|
||||
@import "scss/bootstrap_scss/bootstrap";
|
||||
@import "scss/_variables";
|
||||
@import "scss/_utilities_extended";
|
||||
@import "scss/bootstrap_scss/utilities/_api.scss";
|
||||
@import "scss/_mixins";
|
||||
@import "scss/_typography";
|
||||
@import "scss/_iconfont";
|
||||
@ -224,7 +226,7 @@ header {
|
||||
padding-left: $o-padding-s;
|
||||
background-color: lighten($secondary, 70%) ;
|
||||
color: $secondary;
|
||||
font-weight: $o-fw-regular;
|
||||
font-weight: $font-weight-normal;
|
||||
|
||||
@include o-transition(all, .3s);
|
||||
@include font-size($font-size-sm);
|
||||
@ -339,7 +341,7 @@ header {
|
||||
display: inline-block;
|
||||
padding: .4rem 0;
|
||||
color: $o-gray-color;
|
||||
font-weight: $o-fw-regular;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
|
||||
&:not(.toctree-l1) {
|
||||
@ -368,7 +370,7 @@ header {
|
||||
}
|
||||
}
|
||||
> a , > .o_toc_entry_wrapper a, > .o_toc_entry_wrapper i {
|
||||
font-weight: $o-fw-bold;
|
||||
font-weight: $font-weight-bolder;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -408,14 +410,14 @@ header {
|
||||
|
||||
h5 {
|
||||
text-transform: uppercase;
|
||||
font-weight: $o-fw-bold;
|
||||
font-weight: $font-weight-bolder;
|
||||
color: $o-gray-color;
|
||||
padding-left: $o-padding-xs;
|
||||
margin-bottom: $o-padding-xs;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: $o-fw-regular;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $o-gray-color
|
||||
}
|
||||
|
||||
@ -452,7 +454,7 @@ header {
|
||||
padding: 0 .3rem;
|
||||
&.file {
|
||||
font-family: $font-family-base;
|
||||
font-weight: $o-fw-medium;
|
||||
font-weight: $o-font-weight-medium;
|
||||
font-style: italic;
|
||||
padding-right: .4rem;
|
||||
color: $blue-700;
|
||||
@ -638,7 +640,7 @@ header {
|
||||
padding: $o-padding-s;
|
||||
|
||||
blockquote {
|
||||
font-weight: $o-fw-semibold;
|
||||
font-weight: $font-weight-bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@ -691,7 +693,7 @@ header {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
color: $o-gray-color;
|
||||
font-weight: $o-fw-semibold;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
@ -720,7 +722,7 @@ header {
|
||||
|
||||
> h1 {
|
||||
color: $secondary;
|
||||
font-weight: $o-fw-bold;
|
||||
font-weight: $font-weight-bolder;
|
||||
margin-bottom: $o-margin-s;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
@ -737,12 +739,8 @@ header {
|
||||
}
|
||||
|
||||
> h3 {
|
||||
font-weight: $o-fw-bold;
|
||||
}
|
||||
|
||||
|
||||
> h4, > h5, > h6 {
|
||||
font-weight: $o-fw-semibold;
|
||||
font-size: $font-size-base * 1.3;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
img {
|
||||
@ -766,7 +764,7 @@ header {
|
||||
.figure {
|
||||
|
||||
.caption, .caption-text {
|
||||
font-weight: $o-fw-semibold;
|
||||
font-weight: $font-weight-bold;
|
||||
color: $o-gray;
|
||||
}
|
||||
|
||||
@ -843,14 +841,14 @@ header {
|
||||
}
|
||||
|
||||
.guilabel, .menuselection {
|
||||
font-weight: $o-fw-semibold;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.dfn{
|
||||
@include font-size($font-size-sm);
|
||||
line-height: 1;
|
||||
color: $blue-600;
|
||||
font-weight: $o-fw-semibold;
|
||||
font-weight: $font-weight-bold;
|
||||
&:before {
|
||||
content:'?';
|
||||
display: inline-block;
|
||||
@ -861,7 +859,7 @@ header {
|
||||
text-align: center;
|
||||
color: $blue-600;
|
||||
font-size: 12px;
|
||||
font-weight: $o-fw-extrabold;
|
||||
font-weight: $font-weight-bolder;
|
||||
font-style: normal;
|
||||
margin: 0 .1rem;
|
||||
}
|
||||
@ -912,7 +910,7 @@ header {
|
||||
line-height: 1em;
|
||||
margin: 0 0 10px 0;
|
||||
@include font-size($font-size-base);
|
||||
font-weight: $o-fw-bold;
|
||||
font-weight: $font-weight-bolder;
|
||||
|
||||
&:before {
|
||||
content: var(--o-alert-icon, #{$o-alert-default-icon});
|
||||
@ -1154,7 +1152,7 @@ footer {
|
||||
|
||||
h4 {
|
||||
color: $secondary;
|
||||
font-weight: $o-fw-bold;
|
||||
font-weight: $font-weight-bolder;
|
||||
margin-bottom: $o-margin-s;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user