mirror of
https://github.com/Combodo/iTop.git
synced 2026-02-13 07:24:13 +01:00
N°4684 - Align portal default theme with backoffice one (#702)
* Prepare SCSS files and move nav menu / main wrapper from Bootstrap positioning * Small work on navigation menu * Split bootstrap theme file into multiple files inside themes/ * Fix unit test missing css/ import path * Better display for usercard * Upload precompiled portal stylesheets to fix unit test based on portal.css * Polish menu * Stylize home tiles * Stylize home tiles and layout pages * Stylize home tiles and layout pages * Stylize home tiles and layout pages * Stylize home tiles and layout pages * Define default font in a more elegant way * Small implementation for open/close navigation_menu * Fix navigation menu dropdown menu not working * Fix menu colors * Set <html> lang attribute * Add accessibility attributes to menu toggler * Fix bricks / page title dot spacing * new look adaptation * Fix padding in manage brick * Fix menu entries font size and color * Change manage export color * Fix icon size in tiles * Add style to manage brick panels * Redesign browse brick mosaic view * Fix variable name collision * - Set templates cache in dev mode to 1s - Implements components classes JS - Move navigations layouts outside the global layout - Update tiles * Fix tile description font size * Redesign browse brick tree mode * Tweak navigation menu css * - use custom elements for js components - adjust layouts * Modify forms/modals * Modify method name following code review * Add a dropdown element to replace bootstrap one * improvement to dropdown * datatable prevent column sort icon to wrap * update composer json file. Without classmap-authoritative flag, classmap are not generated There is no test folder * remove colored circle in manage brick tile titles * remove white span between title and title additional part in brick layout * convert navigation menu js to custom element * navigation menu (WIP) * Improvement to dropdown * Fix some caselog classes * Improvement to dropdown * Improvement to dropdown * navigation menu (WIP) * portal ui version 2025 * datatable sort icon issue on link sets * portal ui settings * Fix dropdown for browse brick * add portal scss colors * add alerts scss= * Buttons improvement * Correction list table action issue * responsive adjustments * restore ben-j erased stephen * ipb-button integration * remove table header bottom border * remove brick page ipb-page--main-header duplicate * Adjust button styel * Fix browse brick buttons * Correctly overload approot and fix scsss imports * Fix treeview expand buttons, fix mosaic first display glitch and add animation to each mosaic tile drawn * Fix treeview toolbar * remove wrap from ipb-button-groups * Fix hover and clickable space in mosaics * Clean dropdown css * Fix dropdown menu content for a better display * Align pagination buttons with theme buttons * Align pagination buttons with theme buttons * Fix drowdown * Add precompiled stylesheets for merge to main branch --------- Co-authored-by: Benjamin Dalsass <95754414+bdalsass@users.noreply.github.com>
This commit is contained in:
Stephen Abello
175
datamodels/2.x/itop-portal-base/portal/public/css/mixins.scss
Normal file
175
datamodels/2.x/itop-portal-base/portal/public/css/mixins.scss
Normal file
@@ -0,0 +1,175 @@
|
||||
/* SCSS variables */
|
||||
$ipb-following-dot--size: $common-size-150 !default;
|
||||
$ipb-following-dot--color: $common-color-orange-600 !default;
|
||||
$ipb-following-dot--margin-y: auto !default;
|
||||
$ipb-following-dot--margin-x: $common-spacing-300 !default;
|
||||
|
||||
@mixin ipb-following-dot($size:$ipb-following-dot--size, $color:$ipb-following-dot--color) {
|
||||
&:before {
|
||||
content: '';
|
||||
height: $size;
|
||||
width: $size;
|
||||
background-color: $color;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
margin: $ipb-following-dot--margin-y $ipb-following-dot--margin-x;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
/* SCSS variables */
|
||||
$ipb-heavy-animated-border--border-color: $common-color-blue-grey-700 !default;
|
||||
$ipb-heavy-animated-border--border-width: $common-size-50 !default;
|
||||
$ipb-heavy-animated-border--border-radius: $common-border-radius-500 !default;
|
||||
|
||||
@mixin ipb-heavy-animated-border($width:$ipb-heavy-animated-border--border-width, $color:$ipb-heavy-animated-border--border-color) {
|
||||
&:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -$width;
|
||||
left: -$width;
|
||||
right: -$width;
|
||||
bottom: -$width;
|
||||
border: $width solid transparent;
|
||||
border-radius: $ipb-heavy-animated-border--border-radius;
|
||||
transition: border-color 1s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
&:hover{
|
||||
&:after{
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* SCSS variables */
|
||||
$ipb-toggle-nav--color: white !default;
|
||||
|
||||
@mixin ipb-toggle-nav($color:$ipb-toggle-nav--color) {
|
||||
|
||||
padding: 10px 8px;
|
||||
border-radius: 5px;
|
||||
|
||||
.ipb-navigation-menu--toggle-icon {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 20px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.ipb-navigation-menu--toggle-bar {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
transition: all 0.2s linear;
|
||||
background-color: $color;
|
||||
|
||||
&:nth-child(1) {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@mixin ipb-toggle-nav-animated-cross($color:$ipb-toggle-nav--color) {
|
||||
|
||||
.ipb-navigation-menu--toggle-bar {
|
||||
|
||||
background-color: $color;
|
||||
|
||||
&:nth-child(1) {
|
||||
top: 9px;
|
||||
left: 2px;
|
||||
width: 25px;
|
||||
transform: rotateZ(-45deg);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
top: 8px;
|
||||
left: 7px;
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
top: 9px;
|
||||
left: 2px;
|
||||
width: 25px;
|
||||
transform: rotateZ(45deg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@mixin ipb-toggle-nav-animated-chevron-right($color:$ipb-toggle-nav--color) {
|
||||
|
||||
.ipb-navigation-menu--toggle-bar {
|
||||
|
||||
background-color: $color;
|
||||
|
||||
&:nth-child(1) {
|
||||
top: 4px;
|
||||
left: 7px;
|
||||
width: 14px;
|
||||
transform: rotateZ(-45deg);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
top: 8px;
|
||||
left: 7px;
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
top: 12px;
|
||||
left: 7px;
|
||||
width: 14px;
|
||||
transform: rotateZ(45deg);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* SCSS variables */
|
||||
$ipb-scrollbar--color: $common-color-grey-200 $common-color-blue-grey-800 !default;
|
||||
|
||||
@mixin ipb-scrollbar($overflowX:hidden, $overflowY:auto, $scrollbarWidth:thin, $scrollbarColor:$ipb-scrollbar--color) {
|
||||
overflow-x: $overflowX;
|
||||
overflow-y: $overflowY;
|
||||
scrollbar-width: $scrollbarWidth;
|
||||
scrollbar-color: $scrollbarColor;
|
||||
}
|
||||
|
||||
/* SCSS variables */
|
||||
|
||||
@mixin ipb-text-overflow-ellipsis() {
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* SCSS variables */
|
||||
$ipb-animation--property: all;
|
||||
$ipb-animation--duration: 0.1s !default;
|
||||
$ipb-animation--timing: linear !default;
|
||||
|
||||
@mixin ipb-transition($property: $ipb-animation--property, $duration:$ipb-animation--duration, $timing:$ipb-animation--timing) {
|
||||
transition-property: $property;
|
||||
transition-duration: $duration;
|
||||
transition-timing-function: $timing;
|
||||
}
|
||||
Reference in New Issue
Block a user