composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-19 16:48:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

3
css/backoffice/components/_breadcrumbs.scss
View File

@@ -28,8 +28,7 @@ $ibo-breadcrumbs--item-separator--margin-x: 12px !default;
$ibo-breadcrumbs--item-separator--text-color: $ibo-color-grey-500 !default;
.ibo-breadcrumbs{
display: flex;
align-items: center;
@extend %ibo-vertically-centered-content;
* {
display: flex;

35
css/backoffice/layout/_top-bar.scss
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{

26
css/backoffice/pages/_base.scss
View File

@@ -32,11 +32,11 @@ $ibo-page-content--padding-bottom: 24px !default;
/* Layout */
html{
height: 100%;
height: 100vh;
}
body{
display: flex;
height: 100%;
height: 100vh;
color: var(--ibo-body-text-color);
background-color: var(--ibo-body-background-color);
@extend %ibo-font-ral-nor-100;
@@ -57,14 +57,16 @@ body{
padding-left: $ibo-page-container--elements-padding-x;
padding-right: $ibo-page-container--elements-padding-x;
}
#ibo-top-bar{
z-index: 20;
position: sticky;
top: 0;
left: 0;
right: 0;
}
#ibo-page-content{
z-index: 10;
padding-top: $ibo-page-content--padding-top;
padding-bottom: $ibo-page-content--padding-bottom;
}
}
#ibo-top-bar{
position: sticky;
top: 0;
left: 0;
right: 0;
}
#ibo-page-content{
padding-top: $ibo-page-content--padding-top;
padding-bottom: $ibo-page-content--padding-bottom;
}

9
css/backoffice/utils/helpers/_misc.scss
View File

@@ -16,11 +16,16 @@
* You should have received a copy of the GNU Affero General Public License
*/
%ibo-centered-content{
%ibo-fully-centered-content{
display: flex;
justify-content: center;
align-items: center;
}
/* Note: This might not be named correctly. The intention is to make an element occupy the full height of its parent and to be centered in it */
%ibo-vertically-centered-content{
display: flex;
align-items: stretch;
}
%ibo-text-truncated-with-ellipsis{
white-space: nowrap;
overflow-x: hidden;
@@ -31,7 +36,7 @@
border-radius: var(--ibo-border-radius-full);
border: 2px solid var(--ibo-color-grey-300);
overflow: hidden;
@extend %ibo-centered-content;
@extend %ibo-fully-centered-content;
> *{
position: absolute;

4
css/backoffice/utils/helpers/_typography.scss
View File

@@ -56,7 +56,7 @@
}
%ibo-font-ral-nor-300 {
font-size: $ibo-font-size-300;
font-family:" Raleway";
font-family:"Monorale";
font-weight: 400;
}
%ibo-font-ral-nor-350 {
@@ -111,7 +111,7 @@
}
%ibo-font-ral-med-300 {
font-size: $ibo-font-size-300;
font-family:" Raleway";
font-family:"Monorale";
font-weight: 500;
}
%ibo-font-ral-med-350 {