Introduce vertical separator for toolbar blocks

This commit is contained in:
Molkobain
2021-03-19 19:18:10 +01:00
parent 8717d6d75e
commit 10bdb57391
11 changed files with 139 additions and 2 deletions

View File

@@ -0,0 +1,8 @@
/*!
* @copyright Copyright (C) 2010-2021 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
@import "toolbar";
@import "toolbar-spacer";
@import "separator";

View File

@@ -0,0 +1,21 @@
/*!
* @copyright Copyright (C) 2010-2021 Combodo SARL
* @license http://opensource.org/licenses/AGPL-3.0
*/
/* SCSS variables */
$ibo-toolbar-vertical-separator--width: 1px !default;
$ibo-toolbar-vertical-separator--height: 16px !default;
$ibo-toolbar-vertical-separator--margin-x: 0.75rem !default;
$ibo-toolbar-vertical-separator--margin-y: 0 !default;
$ibo-toolbar-vertical-separator--border-size: 1px !default;
$ibo-toolbar-vertical-separator--border-color: $ibo-color-grey-500 !default;
/* SCSS Rules */
.ibo-toolbar-vertical-separator {
display: inline-flex;
border-right: $ibo-toolbar-vertical-separator--border-size solid $ibo-toolbar-vertical-separator--border-color;
width: $ibo-toolbar-vertical-separator--width;
height: $ibo-toolbar-vertical-separator--height;
margin: $ibo-toolbar-vertical-separator--margin-y $ibo-toolbar-vertical-separator--margin-x;
}

View File

@@ -0,0 +1,11 @@
/*!
* copyright Copyright (C) 2010-2021 Combodo SARL
* license http://opensource.org/licenses/AGPL-3.0
*/
.ibo-toolbar--button {
.ibo-toolbar-spacer {
flex-grow: 1;
}
}

View File

@@ -0,0 +1,21 @@
/*!
* copyright Copyright (C) 2010-2021 Combodo SARL
* license http://opensource.org/licenses/AGPL-3.0
*/
$ibo-toolbar--button-margin-top: 16px !default;
.ibo-toolbar {
display: flex;
align-items: center;
&.ibo-toolbar--action {
position: relative;
}
&.ibo-toolbar--button {
@extend %ibo-vertically-centered-content;
margin-top: $ibo-toolbar--button-margin-top;
}
}