N°2847 - SCSS: Refactor some variables names and some patterns into helpers

This commit is contained in:
Molkobain
2020-07-22 18:10:51 +02:00
parent 46deb9590d
commit 6a3bbd8d49
5 changed files with 44 additions and 33 deletions

View File

@@ -17,26 +17,31 @@
*/
/* SCSS variables (can be overloaded) */
$ibo-top-bar-height: 54px !default;
$ibo-top-bar-padding-left: 16px !default; /* Should be align with the page content padding-left */
$ibo-top-bar-padding-right: 16px !default;
$ibo-top-bar-padding-y: 0px !default;
$ibo-top-bar-background-color: $ibo-color-white-100 !default;
$ibo-top-bar--height: 54px !default;
$ibo-top-bar--padding-left: 16px !default; /* Should be align with the page content padding-left */
$ibo-top-bar--padding-right: 16px !default;
$ibo-top-bar--padding-y: 0px !default;
$ibo-top-bar--background-color: $ibo-color-white-100 !default;
$ibo-top-bar--elements-spacing: 32px !default;
$ibo-top-bar--quick-actions--margin-right: $ibo-top-bar--elements-spacing !default;
/* CSS variables (can be changed directly from the browser) */
:root{
--ibo-top-bar-height: #{$ibo-top-bar-height};
--ibo-top-bar-padding-left: #{$ibo-top-bar-padding-left};
--ibo-top-bar-padding-right: #{$ibo-top-bar-padding-right};
--ibo-top-bar-padding-y: #{$ibo-top-bar-padding-y};
--ibo-top-bar-background-color: #{$ibo-top-bar-background-color};
--ibo-top-bar--height: #{$ibo-top-bar--height};
--ibo-top-bar--padding-left: #{$ibo-top-bar--padding-left};
--ibo-top-bar--padding-right: #{$ibo-top-bar--padding-right};
--ibo-top-bar--padding-y: #{$ibo-top-bar--padding-y};
--ibo-top-bar--background-color: #{$ibo-top-bar--background-color};
--ibo-top-bar--elements-spacing: #{$ibo-top-bar--elements-spacing};
--ibo-top-bar--quick-actions--margin-right: #{$ibo-top-bar--quick-actions--margin-right};
}
.ibo-top-bar{
display: flex;
align-items: center;
height: var(--ibo-top-bar-height);
padding: var(--ibo-top-bar-padding-y) var(--ibo-top-bar-padding-right) var(--ibo-top-bar-padding-y) var(--ibo-top-bar-padding-left);
background-color: var(--ibo-top-bar-background-color);
@extend %ibo-vertically-centered-content;
height: var(--ibo-top-bar--height);
padding: var(--ibo-top-bar--padding-y) var(--ibo-top-bar--padding-right) var(--ibo-top-bar--padding-y) var(--ibo-top-bar--padding-left);
background-color: var(--ibo-top-bar--background-color);
@extend %ibo-elevation-100;
.ibo-breadcrumbs{