composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-05-19 15:22:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

Customers portal : CSS is now separated into a Bootstrap theme stylesheet and another one specific to the template. It is also based on SASS like the console CSSs

Browse Source 
SVN:trunk[4220]
This commit is contained in:
Guillaume Lajarige
2016-06-16 09:51:18 +00:00
parent dc2ee3472b
commit c4660f1caf
8 changed files with 230 additions and 526 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
datamodels/2.x/itop-portal-base/portal/src/helpers/applicationhelper.class.inc.php
View File

@@ -313,6 +313,12 @@ class ApplicationHelper
'bricks' => array(), 'bricks' => array(),
'bricks_total_width' => 0 'bricks_total_width' => 0
); );
$aPortalConf['properties']['themes']['bootstrap'] = 'itop-portal-base/portal/web/css/bootstrap-theme-simplex.min.css';
$aPortalConf['properties']['themes']['bootstrap'] = 'itop-portal-base/portal/web/css/bootstrap-theme-darkly.min.css';
$aPortalConf['properties']['themes']['bootstrap'] = 'itop-portal-base/portal/web/css/bootstrap-theme-flatly.min.css';
$aPortalConf['properties']['themes']['bootstrap'] = 'itop-portal-base/portal/web/css/bootstrap-theme-slate.min.css';
$aPortalConf['properties']['themes']['bootstrap'] = 'itop-portal-base/portal/web/css/bootstrap-theme-superhero.min.css';
$aPortalConf['properties']['themes']['bootstrap'] = 'itop-portal-base/portal/web/css/bootstrap-theme-united.min.css';
// - Global portal properties // - Global portal properties
foreach ($oDesign->GetNodes('/module_design/properties/*') as $oPropertyNode) foreach ($oDesign->GetNodes('/module_design/properties/*') as $oPropertyNode)
{ {

2
datamodels/2.x/itop-portal-base/portal/src/views/bricks/browse/layout.html.twig
View File

@@ -8,7 +8,7 @@
{% block pMainHeaderActions %} {% block pMainHeaderActions %}
{% if aBrowseButtons|length > 1 %} {% if aBrowseButtons|length > 1 %}
<div class="btn-group btn-group-sm btn_group_explicit"> <div class="btn-group {#btn-group-sm#} btn_group_explicit">
{% for sBrowseButton in aBrowseButtons %} {% for sBrowseButton in aBrowseButtons %}
<a href="{{ app.url_generator.generate('p_browse_brick_mode', {'sBrickId': sBrickId, 'sBrowseMode': sBrowseButton}) }}" class="btn btn-default {% if sBrowseMode == sBrowseButton %}active{% endif %}">{{ ('Brick:Portal:Browse:Mode:'~sBrowseButton|capitalize)|dict_s }}</a> <a href="{{ app.url_generator.generate('p_browse_brick_mode', {'sBrickId': sBrickId, 'sBrowseMode': sBrowseButton}) }}" class="btn btn-default {% if sBrowseMode == sBrowseButton %}active{% endif %}">{{ ('Brick:Portal:Browse:Mode:'~sBrowseButton|capitalize)|dict_s }}</a>
{% endfor %} {% endfor %}

2
datamodels/2.x/itop-portal-base/portal/src/views/bricks/manage/layout.html.twig
View File

@@ -8,7 +8,7 @@
{% block pMainHeaderActions %} {% block pMainHeaderActions %}
{% if aGroupingTabsValues|length > 1 %} {% if aGroupingTabsValues|length > 1 %}
<div class="btn-group btn-group-sm btn_group_explicit"> <div class="btn-group {#btn-group-sm#} btn_group_explicit">
{% for aGroupingTab in aGroupingTabsValues %} {% for aGroupingTab in aGroupingTabsValues %}
<a href="{{ app.url_generator.generate('p_manage_brick', {'sBrickId': sBrickId, 'sGroupingTab': aGroupingTab.value}) }}" class="btn btn-default {% if sGroupingTab is defined and sGroupingTab == aGroupingTab.value %}active{% endif %}">{{ aGroupingTab.label|raw }}</a> <a href="{{ app.url_generator.generate('p_manage_brick', {'sBrickId': sBrickId, 'sGroupingTab': aGroupingTab.value}) }}" class="btn btn-default {% if sGroupingTab is defined and sGroupingTab == aGroupingTab.value %}active{% endif %}">{{ aGroupingTab.label|raw }}</a>
{% endfor %} {% endfor %}

2
datamodels/2.x/itop-portal-base/portal/src/views/layout.html.twig
View File

@@ -169,7 +169,7 @@
{# Sidebar navigation menu for normal screens #} {# Sidebar navigation menu for normal screens #}
<nav class="navbar-default hidden-xs col-sm-3 col-md-2" id="sidebar" role="navigation"> <nav class="navbar-default hidden-xs col-sm-3 col-md-2" id="sidebar" role="navigation">
<div class="user_card"> <div class="user_card bg-primary">
<div class="user_photo" style="background-image: url('{{ sUserPhotoUrl }}');"> <div class="user_photo" style="background-image: url('{{ sUserPhotoUrl }}');">
</div> </div>
<div class="user_infos"> <div class="user_infos">

359
datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.scss vendored
View File

@@ -2097,28 +2097,32 @@ fieldset[disabled] .btn {
opacity: 0.65; opacity: 0.65;
filter: alpha(opacity=65); filter: alpha(opacity=65);
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none box-shadow: none;
} }
a.btn.disabled, a.btn.disabled,
fieldset[disabled] a.btn { fieldset[disabled] a.btn {
pointer-events: none pointer-events: none;
} }
.btn-default { .btn-default {
color: $btn-default-color; color: $btn-default-color;
background-color: $btn-default-bg; background-color: $btn-default-bg;
border: $btn-default-border border: $btn-default-border;
} }
.btn-default:focus, .btn-default:focus,
.btn-default.focus { .btn-default.focus {
box-shadow: $btn-bg-shadow; color: $btn-default-color;
background-color: $btn-default-bg-hover;
border: $btn-default-border;
} }
.btn-default:hover { .btn-default:hover {
box-shadow: $btn-bg-shadow; background-color: $btn-default-bg-hover;
border: $btn-default-border;
} }
.btn-default:active, .btn-default:active,
.btn-default.active, .btn-default.active,
.open>.dropdown-toggle.btn-default { .open>.dropdown-toggle.btn-default {
box-shadow: $btn-bg-shadow; background-color: $btn-default-bg-hover;
border: $btn-default-border;
} }
.btn-default:active:hover, .btn-default:active:hover,
.btn-default.active:hover, .btn-default.active:hover,
@@ -2129,12 +2133,14 @@ fieldset[disabled] a.btn {
.btn-default:active.focus, .btn-default:active.focus,
.btn-default.active.focus, .btn-default.active.focus,
.open>.dropdown-toggle.btn-default.focus { .open>.dropdown-toggle.btn-default.focus {
box-shadow: $btn-bg-shadow; background-color: $btn-default-bg-hover;
border: $btn-default-border;
} }
.btn-default:active, .btn-default:active,
.btn-default.active, .btn-default.active,
.open>.dropdown-toggle.btn-default { .open>.dropdown-toggle.btn-default {
background-image: none background-color: $btn-default-bg-hover;
border: $btn-default-border;
} }
.btn-default.disabled, .btn-default.disabled,
.btn-default[disabled], .btn-default[disabled],
@@ -2164,19 +2170,22 @@ fieldset[disabled] .btn-default.active {
.btn-primary { .btn-primary {
color: $btn-primary-color; color: $btn-primary-color;
background-color: $btn-primary-bg; background-color: $btn-primary-bg;
border: $btn-primary-border border: $btn-primary-border;
} }
.btn-primary:focus, .btn-primary:focus,
.btn-primary.focus { .btn-primary.focus {
box-shadow: $btn-bg-shadow; background-color: $btn-primary-bg-hover;
border: $btn-primary-border;
} }
.btn-primary:hover { .btn-primary:hover {
box-shadow: $btn-bg-shadow; background-color: $btn-primary-bg-hover;
border: $btn-primary-border;
} }
.btn-primary:active, .btn-primary:active,
.btn-primary.active, .btn-primary.active,
.open>.dropdown-toggle.btn-primary { .open>.dropdown-toggle.btn-primary {
box-shadow: $btn-bg-shadow; background-color: $btn-primary-bg-hover;
border: $btn-primary-border;
} }
.btn-primary:active:hover, .btn-primary:active:hover,
.btn-primary.active:hover, .btn-primary.active:hover,
@@ -2187,12 +2196,14 @@ fieldset[disabled] .btn-default.active {
.btn-primary:active.focus, .btn-primary:active.focus,
.btn-primary.active.focus, .btn-primary.active.focus,
.open>.dropdown-toggle.btn-primary.focus { .open>.dropdown-toggle.btn-primary.focus {
box-shadow: $btn-bg-shadow; background-color: $btn-primary-bg-hover;
border: $btn-primary-border;
} }
.btn-primary:active, .btn-primary:active,
.btn-primary.active, .btn-primary.active,
.open>.dropdown-toggle.btn-primary { .open>.dropdown-toggle.btn-primary {
background-image: none background-color: $btn-primary-bg-hover;
border: $btn-primary-border;
} }
.btn-primary.disabled, .btn-primary.disabled,
.btn-primary[disabled], .btn-primary[disabled],
@@ -2226,15 +2237,18 @@ fieldset[disabled] .btn-primary.active {
} }
.btn-success:focus, .btn-success:focus,
.btn-success.focus { .btn-success.focus {
box-shadow: $btn-bg-shadow; background-color: $btn-success-bg-hover;
border: $btn-success-border
} }
.btn-success:hover { .btn-success:hover {
box-shadow: $btn-bg-shadow; background-color: $btn-success-bg-hover;
border: $btn-success-border
} }
.btn-success:active, .btn-success:active,
.btn-success.active, .btn-success.active,
.open>.dropdown-toggle.btn-success { .open>.dropdown-toggle.btn-success {
box-shadow: $btn-bg-shadow; background-color: $btn-success-bg-hover;
border: $btn-success-border
} }
.btn-success:active:hover, .btn-success:active:hover,
.btn-success.active:hover, .btn-success.active:hover,
@@ -2245,12 +2259,14 @@ fieldset[disabled] .btn-primary.active {
.btn-success:active.focus, .btn-success:active.focus,
.btn-success.active.focus, .btn-success.active.focus,
.open>.dropdown-toggle.btn-success.focus { .open>.dropdown-toggle.btn-success.focus {
box-shadow: $btn-bg-shadow; background-color: $btn-success-bg-hover;
border: $btn-success-border
} }
.btn-success:active, .btn-success:active,
.btn-success.active, .btn-success.active,
.open>.dropdown-toggle.btn-success { .open>.dropdown-toggle.btn-success {
background-image: none background-color: $btn-success-bg-hover;
border: $btn-success-border
} }
.btn-success.disabled, .btn-success.disabled,
.btn-success[disabled], .btn-success[disabled],
@@ -2274,8 +2290,8 @@ fieldset[disabled] .btn-success.active {
border-color: #469408 border-color: #469408
} }
.btn-success .badge { .btn-success .badge {
color: #469408; color: $btn-success-color;
background-color: #ffffff background-color: $btn-success-bg;
} }
.btn-info { .btn-info {
color: $btn-info-color; color: $btn-info-color;
@@ -2284,15 +2300,18 @@ fieldset[disabled] .btn-success.active {
} }
.btn-info:focus, .btn-info:focus,
.btn-info.focus { .btn-info.focus {
box-shadow: $btn-bg-shadow background-color: $btn-info-bg-hover;
border: $btn-info-border
} }
.btn-info:hover { .btn-info:hover {
box-shadow: $btn-bg-shadow background-color: $btn-info-bg-hover;
border: $btn-info-border
} }
.btn-info:active, .btn-info:active,
.btn-info.active, .btn-info.active,
.open>.dropdown-toggle.btn-info { .open>.dropdown-toggle.btn-info {
box-shadow: $btn-bg-shadow background-color: $btn-info-bg-hover;
border: $btn-info-border
} }
.btn-info:active:hover, .btn-info:active:hover,
.btn-info.active:hover, .btn-info.active:hover,
@@ -2303,12 +2322,14 @@ fieldset[disabled] .btn-success.active {
.btn-info:active.focus, .btn-info:active.focus,
.btn-info.active.focus, .btn-info.active.focus,
.open>.dropdown-toggle.btn-info.focus { .open>.dropdown-toggle.btn-info.focus {
box-shadow: $btn-bg-shadow background-color: $btn-info-bg-hover;
border: $btn-info-border
} }
.btn-info:active, .btn-info:active,
.btn-info.active, .btn-info.active,
.open>.dropdown-toggle.btn-info { .open>.dropdown-toggle.btn-info {
background-image: none background-color: $btn-info-bg-hover;
border: $btn-info-border
} }
.btn-info.disabled, .btn-info.disabled,
.btn-info[disabled], .btn-info[disabled],
@@ -2332,8 +2353,8 @@ fieldset[disabled] .btn-info.active {
border-color: #029acf border-color: #029acf
} }
.btn-info .badge { .btn-info .badge {
color: #029acf; color: $btn-info-color;
background-color: #ffffff background-color: $btn-info-bg;
} }
.btn-warning { .btn-warning {
color: $btn-warning-color; color: $btn-warning-color;
@@ -2342,15 +2363,18 @@ fieldset[disabled] .btn-info.active {
} }
.btn-warning:focus, .btn-warning:focus,
.btn-warning.focus { .btn-warning.focus {
box-shadow: $btn-bg-shadow; background-color: $btn-warning-bg-hover;
border: $btn-warning-border;
} }
.btn-warning:hover { .btn-warning:hover {
box-shadow: $btn-bg-shadow; background-color: $btn-warning-bg-hover;
border: $btn-warning-border;
} }
.btn-warning:active, .btn-warning:active,
.btn-warning.active, .btn-warning.active,
.open>.dropdown-toggle.btn-warning { .open>.dropdown-toggle.btn-warning {
box-shadow: $btn-bg-shadow; background-color: $btn-warning-bg-hover;
border: $btn-warning-border;
} }
.btn-warning:active:hover, .btn-warning:active:hover,
.btn-warning.active:hover, .btn-warning.active:hover,
@@ -2361,12 +2385,14 @@ fieldset[disabled] .btn-info.active {
.btn-warning:active.focus, .btn-warning:active.focus,
.btn-warning.active.focus, .btn-warning.active.focus,
.open>.dropdown-toggle.btn-warning.focus { .open>.dropdown-toggle.btn-warning.focus {
box-shadow: $btn-bg-shadow; background-color: $btn-warning-bg-hover;
border: $btn-warning-border;
} }
.btn-warning:active, .btn-warning:active,
.btn-warning.active, .btn-warning.active,
.open>.dropdown-toggle.btn-warning { .open>.dropdown-toggle.btn-warning {
background-image: none background-color: $btn-warning-bg-hover;
border: $btn-warning-border;
} }
.btn-warning.disabled, .btn-warning.disabled,
.btn-warning[disabled], .btn-warning[disabled],
@@ -2390,25 +2416,28 @@ fieldset[disabled] .btn-warning.active {
border-color: #9b479f border-color: #9b479f
} }
.btn-warning .badge { .btn-warning .badge {
color: #9b479f; color: $btn-warning-color;
background-color: #ffffff background-color: $btn-warning-bg;
} }
.btn-danger { .btn-danger {
color: $btn-danger-color; color: $btn-danger-color;
background-color: $btn-danger-bg; background-color: $btn-danger-bg;
border: $btn-danger-border border: $btn-danger-border;
} }
.btn-danger:focus, .btn-danger:focus,
.btn-danger.focus { .btn-danger.focus {
box-shadow: $btn-bg-shadow; background-color: $btn-danger-bg-hover;
border: $btn-danger-border;
} }
.btn-danger:hover { .btn-danger:hover {
box-shadow: $btn-bg-shadow; background-color: $btn-danger-bg-hover;
border: $btn-danger-border;
} }
.btn-danger:active, .btn-danger:active,
.btn-danger.active, .btn-danger.active,
.open>.dropdown-toggle.btn-danger { .open>.dropdown-toggle.btn-danger {
box-shadow: $btn-bg-shadow; background-color: $btn-danger-bg-hover;
border: $btn-danger-border;
} }
.btn-danger:active:hover, .btn-danger:active:hover,
.btn-danger.active:hover, .btn-danger.active:hover,
@@ -2419,12 +2448,14 @@ fieldset[disabled] .btn-warning.active {
.btn-danger:active.focus, .btn-danger:active.focus,
.btn-danger.active.focus, .btn-danger.active.focus,
.open>.dropdown-toggle.btn-danger.focus { .open>.dropdown-toggle.btn-danger.focus {
box-shadow: $btn-bg-shadow; background-color: $btn-danger-bg-hover;
border: $btn-danger-border;
} }
.btn-danger:active, .btn-danger:active,
.btn-danger.active, .btn-danger.active,
.open>.dropdown-toggle.btn-danger { .open>.dropdown-toggle.btn-danger {
background-image: none background-color: $btn-danger-bg-hover;
border: $btn-danger-border;
} }
.btn-danger.disabled, .btn-danger.disabled,
.btn-danger[disabled], .btn-danger[disabled],
@@ -2448,8 +2479,8 @@ fieldset[disabled] .btn-danger.active {
border-color: #d9831f border-color: #d9831f
} }
.btn-danger .badge { .btn-danger .badge {
color: #d9831f; color: $btn-danger-color;
background-color: #ffffff background-color: $btn-danger-bg;
} }
.btn-link { .btn-link {
color: $brand-primary; color: $brand-primary;
@@ -3584,12 +3615,21 @@ select[multiple].input-group-sm>.input-group-btn>.btn {
margin-right: 0 margin-right: 0
} }
} }
@media (min-width: 768px){
.user_card{
background-color: $combodo-orange;
background-image: url('../img/backgrounds/geometric-orange.svg');
background-size: 170%;
background-position: 60% 60%;
box-shadow: -3px 2px 3px rgba(0, 0, 0, 0.4);
}
}
.navbar-default { .navbar-default {
background-color: $combodo-dark-gray; background-color: $combodo-dark-gray;
border-color: none; border-color: none;
} }
.navbar-default .navbar-brand { .navbar-default .navbar-brand {
color: $gray color: $gray;
} }
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus { .navbar-default .navbar-brand:focus {
@@ -3597,13 +3637,13 @@ select[multiple].input-group-sm>.input-group-btn>.btn {
background-color: transparent background-color: transparent
} }
.navbar-default .navbar-text { .navbar-default .navbar-text {
color: $gray color: $gray;
} }
.navbar-default .navbar-nav>li>a { .navbar-default .navbar-nav>li>a {
color: $white color: white;
} }
.navbar-default .navbar-nav>.active>a { .navbar-default .navbar-nav>.active>a {
color: $white; color: white;
background-color: $combodo-dark-gray-darker; background-color: $combodo-dark-gray-darker;
font-weight: 600 font-weight: 600
} }
@@ -3617,11 +3657,11 @@ select[multiple].input-group-sm>.input-group-btn>.btn {
.navbar-default .navbar-nav>.disabled>a, .navbar-default .navbar-nav>.disabled>a,
.navbar-default .navbar-nav>.disabled>a:hover, .navbar-default .navbar-nav>.disabled>a:hover,
.navbar-default .navbar-nav>.disabled>a:focus { .navbar-default .navbar-nav>.disabled>a:focus {
color: #444444; color: $gray-dark;
background-color: transparent background-color: transparent
} }
.navbar-default .navbar-toggle { .navbar-default .navbar-toggle {
border-color: #dddddd; border-color: $gray-lighter;
border-top: none; border-top: none;
border-right: none; border-right: none;
border-bottom: none; border-bottom: none;
@@ -3634,6 +3674,7 @@ select[multiple].input-group-sm>.input-group-btn>.btn {
} }
.navbar-default .navbar-toggle .icon-bar { .navbar-default .navbar-toggle .icon-bar {
height: 3px; height: 3px;
background-color: $gray;
} }
.navbar-default .navbar-collapse, .navbar-default .navbar-collapse,
.navbar-default .navbar-form { .navbar-default .navbar-form {
@@ -3646,6 +3687,10 @@ select[multiple].input-group-sm>.input-group-btn>.btn {
color: $brand-primary color: $brand-primary
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu>.dropdown-header {
border-color: $combodo-dark-gray-dark
}
.navbar-default .navbar-nav .divider,
.navbar-default .navbar-nav .open .dropdown-menu .divider { .navbar-default .navbar-nav .open .dropdown-menu .divider {
background-color: $combodo-dark-gray-dark; background-color: $combodo-dark-gray-dark;
} }
@@ -3667,18 +3712,26 @@ select[multiple].input-group-sm>.input-group-btn>.btn {
.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a, .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,
.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover, .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus { .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus {
color: #444444; color: $gray-dark;
background-color: transparent background-color: transparent
} }
} }
@media (min-width: 768px) {
.navbar-default .navbar-nav>li:after{
border-bottom-color: #7D7D7D;
}
.navbar-default .navbar-nav>li.active:after{
border-bottom-color: transparent;
}
}
.navbar-default .navbar-link { .navbar-default .navbar-link {
color: $gray color: $white
} }
.navbar-default .navbar-link:hover { .navbar-default .navbar-link:hover {
color: $brand-primary color: $brand-primary
} }
.navbar-default .btn-link { .navbar-default .btn-link {
color: $gray color: $white
} }
.navbar-default .btn-link:hover, .navbar-default .btn-link:hover,
.navbar-default .btn-link:focus { .navbar-default .btn-link:focus {
@@ -3688,109 +3741,123 @@ select[multiple].input-group-sm>.input-group-btn>.btn {
fieldset[disabled] .navbar-default .btn-link:hover, fieldset[disabled] .navbar-default .btn-link:hover,
.navbar-default .btn-link[disabled]:focus, .navbar-default .btn-link[disabled]:focus,
fieldset[disabled] .navbar-default .btn-link:focus { fieldset[disabled] .navbar-default .btn-link:focus {
color: #444444 color: $gray-dark
} }
.navbar-inverse { .navbar-inverse {
background-color: $brand-primary; background-color: $brand-primary;
border-color: $brand-primary-dark border-color: $brand-primary-dark;
} }
.navbar-inverse .navbar-brand { .navbar-inverse .navbar-brand {
color: #fac0ba color: $white
} }
.navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus { .navbar-inverse .navbar-brand:focus {
color: #ffffff; color: $brand-primary;
background-color: transparent background-color: transparent
} }
.navbar-inverse .navbar-text { .navbar-inverse .navbar-text {
color: #fac0ba color: $white;
} }
.navbar-inverse .navbar-nav>li>a { .navbar-inverse .navbar-nav>li>a {
color: #fac0ba color: $white
}
.navbar-inverse .navbar-nav>.active>a {
color: $white;
background-color: $combodo-orange-darker;
font-weight: 600
} }
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus { .navbar-inverse .navbar-nav>li>a:focus,
color: #ffffff;
background-color: transparent
}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.active>a:focus { .navbar-inverse .navbar-nav>.active>a:focus {
color: #ffffff; color: $combodo-orange;
background-color: transparent background-color: $white
} }
.navbar-inverse .navbar-nav>.disabled>a, .navbar-inverse .navbar-nav>.disabled>a,
.navbar-inverse .navbar-nav>.disabled>a:hover, .navbar-inverse .navbar-nav>.disabled>a:hover,
.navbar-inverse .navbar-nav>.disabled>a:focus { .navbar-inverse .navbar-nav>.disabled>a:focus {
color: #cccccc; color: $gray-dark;
background-color: transparent background-color: transparent
} }
.navbar-inverse .navbar-toggle { .navbar-inverse .navbar-toggle {
border-color: $brand-primary-dark border-color: $white;
border-top: none;
border-right: none;
border-bottom: none;
border-radius: 0px;
margin-right: 0px;
} }
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus { .navbar-inverse .navbar-toggle:focus {
background-color: $brand-primary-dark background-color: inherit;
} }
.navbar-inverse .navbar-toggle .icon-bar { .navbar-inverse .navbar-toggle .icon-bar {
background-color: #ffffff height: 3px;
background-color: $white;
} }
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form { .navbar-inverse .navbar-form {
border-color: #b81e0d border: none;
} }
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus { .navbar-inverse .navbar-nav>.open>a:focus {
background-color: transparent; background-color: transparent;
color: #ffffff color: $brand-primary
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header { .navbar-inverse .navbar-nav .divider,
border-color: $brand-primary-dark
}
.navbar-inverse .navbar-nav .open .dropdown-menu .divider{ .navbar-inverse .navbar-nav .open .dropdown-menu .divider{
background-color: $brand-primary-dark background-color: $combodo-orange-darker;
} }
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a { .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #fac0ba color: $white;
background-color: inherit;
} }
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus { .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus {
color: #ffffff; color: $brand-primary;
background-color: transparent background-color: transparent
} }
.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a, .navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,
.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus { .navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus {
color: #ffffff; color: $brand-primary;
background-color: transparent background-color: transparent
} }
.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a, .navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,
.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus { .navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus {
color: #cccccc; color: #444444;
background-color: transparent background-color: transparent
} }
} }
@media (min-width: 768px) {
.navbar-inverse .navbar-nav>li:after{
border-bottom-color: #D06F1A;
}
.navbar-inverse .navbar-nav>li.active:after{
border-bottom-color: transparent;
}
}
.navbar-inverse .navbar-link { .navbar-inverse .navbar-link {
color: #fac0ba color: $white
} }
.navbar-inverse .navbar-link:hover { .navbar-inverse .navbar-link:hover {
color: #ffffff color: $brand-primary
} }
.navbar-inverse .btn-link { .navbar-inverse .btn-link {
color: #fac0ba color: $white
} }
.navbar-inverse .btn-link:hover, .navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link:focus { .navbar-inverse .btn-link:focus {
color: #ffffff color: $brand-primary
} }
.navbar-inverse .btn-link[disabled]:hover, .navbar-inverse .btn-link[disabled]:hover,
fieldset[disabled] .navbar-inverse .btn-link:hover, fieldset[disabled] .navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link[disabled]:focus, .navbar-inverse .btn-link[disabled]:focus,
fieldset[disabled] .navbar-inverse .btn-link:focus { fieldset[disabled] .navbar-inverse .btn-link:focus {
color: #cccccc color: #444444
} }
.breadcrumb { .breadcrumb {
padding: 8px 15px; padding: 8px 15px;
@@ -5865,74 +5932,27 @@ button.close {
} }
.btn-default, .btn-default,
.btn-default:hover { .btn-default:hover {
background-image: -webkit-linear-gradient(#4f5151, #474949 6%, #3f4141); color: $btn-default-color;
background-image: -o-linear-gradient(#4f5151, #474949 6%, #3f4141); border: $btn-default-border
background-image: -webkit-gradient(linear, left top, left bottom, from(#4f5151), color-stop(6%, #474949), to(#3f4141));
background-image: linear-gradient(#4f5151, #474949 6%, #3f4141);
background-repeat: no-repeat;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff4f5151', endColorstr='#ff3f4141', GradientType=0);
-webkit-filter: none;
filter: none;
border: 1px solid #2e2f2f
} }
.btn-primary, .btn-primary,
.btn-primary:hover { .btn-primary:hover {
background-image: -webkit-linear-gradient(#e72510, $brand-primary 6%, #cb210e);
background-image: -o-linear-gradient(#e72510, $brand-primary 6%, #cb210e);
background-image: -webkit-gradient(linear, left top, left bottom, from(#e72510), color-stop(6%, $brand-primary), to(#cb210e));
background-image: linear-gradient(#e72510, $brand-primary 6%, #cb210e);
background-repeat: no-repeat;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffe72510', endColorstr='#ffcb210e', GradientType=0);
-webkit-filter: none;
filter: none;
border: 1px solid $brand-primary-dark border: 1px solid $brand-primary-dark
} }
.btn-success, .btn-success,
.btn-success:hover { .btn-success:hover {
background-image: -webkit-linear-gradient(#4da309, #469408 6%, #3f8507);
background-image: -o-linear-gradient(#4da309, #469408 6%, #3f8507);
background-image: -webkit-gradient(linear, left top, left bottom, from(#4da309), color-stop(6%, #469408), to(#3f8507));
background-image: linear-gradient(#4da309, #469408 6%, #3f8507);
background-repeat: no-repeat;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff4da309', endColorstr='#ff3f8507', GradientType=0);
-webkit-filter: none;
filter: none;
border: 1px solid #2f6405 border: 1px solid #2f6405
} }
.btn-info, .btn-info,
.btn-info:hover { .btn-info:hover {
background-image: -webkit-linear-gradient(#02a5de, #029acf 6%, #028fc0);
background-image: -o-linear-gradient(#02a5de, #029acf 6%, #028fc0);
background-image: -webkit-gradient(linear, left top, left bottom, from(#02a5de), color-stop(6%, #029acf), to(#028fc0));
background-image: linear-gradient(#02a5de, #029acf 6%, #028fc0);
background-repeat: no-repeat;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff02a5de', endColorstr='#ff028fc0', GradientType=0);
-webkit-filter: none;
filter: none;
border: 1px solid #02749c border: 1px solid #02749c
} }
.btn-warning, .btn-warning,
.btn-warning:hover { .btn-warning:hover {
background-image: -webkit-linear-gradient(#a54caa, #9b479f 6%, #914294);
background-image: -o-linear-gradient(#a54caa, #9b479f 6%, #914294);
background-image: -webkit-gradient(linear, left top, left bottom, from(#a54caa), color-stop(6%, #9b479f), to(#914294));
background-image: linear-gradient(#a54caa, #9b479f 6%, #914294);
background-repeat: no-repeat;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffa54caa', endColorstr='#ff914294', GradientType=0);
-webkit-filter: none;
filter: none;
border: 1px solid #79377c border: 1px solid #79377c
} }
.btn-danger, .btn-danger,
.btn-danger:hover { .btn-danger:hover {
background-image: -webkit-linear-gradient(#e08b27, #d9831f 6%, #cc7b1d);
background-image: -o-linear-gradient(#e08b27, #d9831f 6%, #cc7b1d);
background-image: -webkit-gradient(linear, left top, left bottom, from(#e08b27), color-stop(6%, #d9831f), to(#cc7b1d));
background-image: linear-gradient(#e08b27, #d9831f 6%, #cc7b1d);
background-repeat: no-repeat;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffe08b27', endColorstr='#ffcc7b1d', GradientType=0);
-webkit-filter: none;
filter: none;
border: 1px solid #ac6819 border: 1px solid #ac6819
} }
body { body {
@@ -5947,57 +5967,6 @@ legend {
label { label {
font-weight: normal font-weight: normal
} }
.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline,
.has-warning.radio label,
.has-warning.checkbox label,
.has-warning.radio-inline label,
.has-warning.checkbox-inline label,
.has-warning .form-control-feedback {
color: #d9831f
}
.has-warning .form-control,
.has-warning .form-control:focus {
border-color: #d9831f
}
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label,
.has-error .form-control-feedback {
color: $brand-primary
}
.has-error .form-control,
.has-error .form-control:focus {
border-color: $brand-primary
}
.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline,
.has-success.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label,
.has-success .form-control-feedback {
color: #469408
}
.has-success .form-control,
.has-success .form-control:focus {
border-color: #469408
}
.pager a { .pager a {
color: #444444 color: #444444
} }
@@ -6009,3 +5978,25 @@ label {
.pager .disabled>a { .pager .disabled>a {
border-color: #dddddd border-color: #dddddd
} }
/*
* Specific to the combodo theme. Not standard BS classes
*/
.btn-group.btn_group_explicit{
padding: 7px;
background-color: $combodo-dark-gray-darker;
border: 1px solid #EBEAEA;
border-radius: 30px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4) inset;
}
.btn-group.btn_group_explicit .btn{
color: $white;
background-color: transparent;
border: none;
}
.btn-group.btn_group_explicit .btn.active{
color: #6B6965;
background-color: $body-bg;
border-radius: 37px !important;
box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.4);
}

11
datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme.min.css vendored
View File

File diff suppressed because one or more lines are too long

350
datamodels/2.x/itop-portal-base/portal/web/css/portal.scss
View File

@@ -1,3 +1,5 @@
@import 'variables.scss';
/*! /*!
* Combodo portal template v1.0.0 * Combodo portal template v1.0.0
*/ */
@@ -56,7 +58,7 @@ footer{
background-size: 100%; background-size: 100%;
background-position: center center; background-position: center center;
background-color: #585653; background-color: #585653;
border: 2px solid #FFFFFF; border: 2px solid $white;
border-radius: 100%; border-radius: 100%;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
} }
@@ -65,7 +67,7 @@ footer{
position: absolute; position: absolute;
padding-left: 85px; padding-left: 85px;
max-width: 55%; max-width: 55%;
color: #FFFFFF; /*color: $white;*/
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-x: hidden; overflow-x: hidden;
@@ -81,12 +83,7 @@ footer{
} }
#sidebar .user_card{ #sidebar .user_card{
padding: 30px 0px; padding: 30px 0px;
background-color: #EA7D1E;
background-image: url('../img/backgrounds/geometric-orange.svg');
background-size: 170%;
background-position: 60% 60%;
text-align: center; text-align: center;
box-shadow: -3px 2px 3px rgba(0, 0, 0, 0.4);
} }
#sidebar .user_card .user_photo{ #sidebar .user_card .user_photo{
margin: 0px auto 10px auto; margin: 0px auto 10px auto;
@@ -96,15 +93,15 @@ footer{
background-position: center center; background-position: center center;
background-color: #585653; background-color: #585653;
background-repeat: no-repeat; background-repeat: no-repeat;
border: 2px solid #FFFFFF; border: 2px solid $white;
border-radius: 100%; border-radius: 100%;
} }
#sidebar .user_card .user_infos{ #sidebar .user_card .user_infos{
font-size: 1em; font-size: 1em;
color: #FFFFFF; color: $white;
} }
#sidebar .user_card .user_infos .dropdown-toggle{ #sidebar .user_card .user_infos .dropdown-toggle{
color: #FFFFFF; color: $white;
} }
#sidebar .user_card .user_options.dropdown-menu{ #sidebar .user_card .user_options.dropdown-menu{
width: 92%; width: 92%;
@@ -121,42 +118,6 @@ footer{
#sidebar .menu .navbar-nav > li{ #sidebar .menu .navbar-nav > li{
width: 100%; width: 100%;
} }
/*#sidebar .menu .navbar-nav > li:after{
content: "";
display: block;
position: relative;
color: #FFFFFF;
border-bottom: 1px solid #7D7D7D;
}*/
/*#sidebar .menu .navbar-nav > li.active{
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.8) inset;
}*/
/*#sidebar .menu .navbar-nav > li.active:after{
content: " ";
position: absolute;
right: 0px;
top: 0px;
border: 30px solid transparent;
border-right-width: 20px;
border-right-color: #EDECEC;
}*/
/*#sidebar .menu .navbar-nav > li.active > a{
margin-top: -1px; /* To mask border from previous li item */
/*margin-left: 4em;
padding-left: 1em;*/
/*}*/
/*#sidebar .menu .navbar-nav > li > a{
/*padding-left: 3em;*/
/*padding-left: 10%;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 3em;
}*/
/*#sidebar .menu .navbar-nav > li > a:hover{
padding-left: 5%;
transition: padding-left 0.2s ease-in-out;
}*/
#sidebar .menu .navbar-nav > li > a > .brick_icon{ #sidebar .menu .navbar-nav > li > a > .brick_icon{
width: 1.2em; width: 1.2em;
vertical-align: sub; vertical-align: sub;
@@ -288,34 +249,9 @@ footer{
} }
} }
/***************/
/* BS override */
/***************/
/*@font-face {
font-family: 'Glyphicons Halflings';
src: url('../lib/bootstrap/fonts/glyphicons-halflings-regular.eot');
src: url('../lib/bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../lib/bootstrap/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../lib/bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../lib/bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../lib/bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}*/
/*label{
font-weight: bold;
}*/
/*********************/ /*********************/
/* BS theme override */ /* BS theme override */
/*********************/ /*********************/
/*body{
background-color: #EDECEC;
}
a{
color: #D46201;
}
a:hover, a:focus{
color: #C15A02; /* TODO : Darken #D46201 */
/*}
.pagination{
margin: 14px 0px;
}*/
.list-group.tree{ .list-group.tree{
margin-top: 11px; margin-top: 11px;
margin-bottom: -11px; margin-bottom: -11px;
@@ -323,184 +259,12 @@ a:hover, a:focus{
.list-group.tree .list-group-item{ .list-group.tree .list-group-item{
padding-right: 0px; /* To align all actions on the right without indent */ padding-right: 0px; /* To align all actions on the right without indent */
} }
/*.tooltip-inner{
max-width: 400px;
padding: 15px;
}*/
/* Navbars */
/*.navbar-fixed-top .navbar-header{
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
}*/
/*.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse{
max-height: 400px;
}*/
/*.navbar-default .navbar-toggle {
border-top: none;
border-right: none;
border-bottom: none;
border-radius: 0px;
margin-right: 0px;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus{
background-color: inherit;
}
.navbar-default .navbar-toggle .icon-bar{
height: 3px;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form{
border: none;
}
.navbar-default{
background-color: #585653; /* TODO SASS dark grey */
/*border: none;
}
.navbar-default .nav > li > a,
.navbar-default .nav.navbar-nav > li > a{
color: #FFFFFF;
}
.navbar-default .nav > li > a:focus,
.navbar-default .nav > li > a:hover,
.navbar-default .nav.navbar-nav > li > a:focus,
.navbar-default .nav.navbar-nav > li > a:hover{
background-color: #FFFFFF;
color: #EA7D1E;
}
.navbar-default .nav > li.active,
.navbar-default .nav.navbar-nav > li.active > a{
background-color: #292827; /* TODO Darken #585653 */
/*color: #FFFFFF;
font-weight: 600;
}*/
/* Dropdowns */
/*.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
text-decoration: none;
color: #FFFFFF;
background-color: #EA7D1E;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a{
color: #FFFFFF;
background-color: inherit;
}*/
/* Buttons */
/* - Default */
.btn-default,
.btn-default:active, .btn-default.active,
.btn-default:hover, .btn-default:focus{
color: inherit;
background-color: #FFFFFF;
background-image: none;
border: 1px solid rgba(0, 0, 0, 0.15);
}
.btn-default:hover, .btn-default.active:focus{
background-color: #FAFAFA; /* TODO : Darken white */
}
.btn-default:active, .btn-default.active{
background-color: transparent; /* Body background */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
border: none;
border-bottom-color: #EBEAEA;
}
.btn-default:active:hover, .btn-default.active:hover,
.btn-default:active:focus, .btn-default.active:focus,
.btn-default:active.focus, .btn-default.active.focus {
color: inherit;
background-color: #EAEAEA; /* Darken body background */
border: inherit;
}
/* - Primary */
.btn-primary,
.btn-primary:active, .btn-primary.active,
.btn-primary:hover, .btn-primary:focus{
color: #FFFFFF;
background-color: #EA7D1E;
background-image: none;
border: 1px solid rgba(0, 0, 0, 0.15);
}
.btn-primary:hover,
.btn-primary:active:hover, .btn-primary.active:hover,
.btn-primary:active:focus, .btn-primary.active:focus,
.btn-primary:active.focus, .btn-primary.active.focus{
background-color: #DA751C; /* TODO : Darken #EA7D1E */
}
/* Button groups */
.btn-group.btn_group_explicit{
padding: 7px;
background-color: #292827;
border: 1px solid #EBEAEA;
border-radius: 30px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4) inset;
}
.btn-group.btn_group_explicit .btn{
color: #FFFFFF;
background-color: transparent;
border: none;
}
.btn-group.btn_group_explicit .btn.active{
color: #6B6965;
background-color: #EDECEC;
border-radius: 37px !important;
box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.4);
}
/* Panels */
/*.panel{
border: none;
border-radius: 0px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}*/
/* Forms */
/*.form-control{
border-radius: 0px;
}*/
/* Pagination */
/*.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
background-color: #EA7D1E;
border-color: #EA7D1E;
}*/
/*.pagination>li>a:hover,
.pagination>li>span:hover,
.pagination>li>a:focus,
.pagination>li>span:focus {
background-color: #EA7D1E;
border-color: #EA7D1E;
}*/
/* Modal */
/*.modal-content{
border-radius: 0px;
}*/
/* Custom "glyphicons" */ /* Custom "glyphicons" */
.glyphicon-ext-hierarchy:before { .glyphicon-ext-hierarchy:before {
content: url('../img/icons/hierarchy-white-13px.png'); content: url('../img/icons/hierarchy-white-13px.png');
} }
/**********************/
/* BS plugin override */
/**********************/
/* Datatables */
/*.table-striped > tbody > tr:hover {
background-color: #fdf5d0;
}*/
/******************/ /******************/
/* Modal settings */ /* Modal settings */
/******************/ /******************/
@@ -509,13 +273,6 @@ a:hover, a:focus{
text-align: center; text-align: center;
} }
/*@media (min-width: 992px){
.modal-lg {
width: 80%;
max-width: 1200px;
}
}*/
/**************************/ /**************************/
/* MagnificPopup settings */ /* MagnificPopup settings */
/**************************/ /**************************/
@@ -564,7 +321,7 @@ a:hover, a:focus{
margin-bottom: 8px; margin-bottom: 8px;
padding: 0em 1em; padding: 0em 1em;
min-height: 4em; min-height: 4em;
background-color: #FFFFFF; background-color: $white;
background-image: none; background-image: none;
border: none; border: none;
border-radius: 0px; border-radius: 0px;
@@ -678,11 +435,13 @@ a:hover, a:focus{
#main-header-actions{ #main-header-actions{
margin-bottom: 15px; margin-bottom: 15px;
} }
#main-header-actions .btn-group .btn{ /* This is no longer necessary but we keep it just in case */
/*#main-header-actions .btn-group .btn{
padding: 0em 1.5em; padding: 0em 1.5em;
line-height: 2.4em; line-height: 2.4em;
font-size: 14px; font-size: 14px;
} background-image: none;
}*/
@media (min-width: 768px) { @media (min-width: 768px) {
#main-header:after{ #main-header:after{
clear: both; clear: both;
@@ -748,10 +507,6 @@ a:hover, a:focus{
#brick_content_tree{ #brick_content_tree{
position: relative; position: relative;
} }
/*.panel > .list-group:last-child .list-group-item:last-child,
.panel > .panel-collapse > .list-group:last-child .list-group-item:last-child{
margin-bottom: 1px;
}*/
.list-group-item > .list-group-item-actions{ .list-group-item > .list-group-item-actions{
/*display: none; Displaying actions only when hovering was not unanimous in the team */ /*display: none; Displaying actions only when hovering was not unanimous in the team */
@@ -765,11 +520,6 @@ a:hover, a:focus{
.list-group-item .list-group-item-actions a:not(:first-child){ .list-group-item .list-group-item-actions a:not(:first-child){
margin-left: 10px; margin-left: 10px;
} }
/*.list-group-item .list-group-item-text{
margin-left: 5px;
font-size: 1em;
line-height: 1em;
}*/
.list-group-item .keep-spinning{ .list-group-item .keep-spinning{
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
-webkit-animation: spin 1s linear infinite; -webkit-animation: spin 1s linear infinite;
@@ -824,19 +574,9 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
/* Loader */ /* Loader */
#brick_tree_overlay{ #brick_tree_overlay{
/*z-index: 10;*/
display: none; display: none;
padding: 8% 0px; padding: 8% 0px;
/*position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
min-height: 130px;*/
/*background-color: black;*/
border-radius: 0px 0px 4px 4px; border-radius: 0px 0px 4px 4px;
/*opacity: 0.5;
color: white;*/
font-size: 1em; font-size: 1em;
} }
/****************/ /****************/
@@ -847,42 +587,22 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
/*********/ /*********/
/* Forms */ /* Forms */
/*********/ /*********/
/*.form_fields textarea{
height: 160px;
}*/
.form_field .form_mandatory .control-label:after{ .form_field .form_mandatory .control-label:after{
content: "\002a"; content: "\002a";
position: relative; position: relative;
left: 3px; left: 3px;
color: red; /* TODO : SASS this */ color: $brand-primary;
font-size: 0.9em; font-size: 0.9em;
} }
/* Subform field */
/*.subform_field > fieldset{
margin: inherit;
margin-bottom: 15px;
padding: 10px 15px;
border: 1px solid #dddddd;
border-radius: 0px;
}
.subform_field > fieldset > legend{
margin: 0px 0px;
padding: 0px 7px;
width: inherit;
border: none;
font-size: 1em;
font-weight: bold;
color: #777777;
}*/
/* CaseLog field */ /* CaseLog field */
.caselog_field_entry{ .caselog_field_entry{
border: 1px solid #dddddd; border: 1px solid $gray-lighter;
border-top: none; border-top: none;
} }
.caselog_field_entry_header{ .caselog_field_entry_header{
padding: 6px; padding: 6px;
font-size: 1em; font-size: 1em;
border-bottom: 1px solid #FFFFFF; border-bottom: 1px solid $white;
background-color: #F2F2F2; background-color: #F2F2F2;
} }
.caselog_field_entry_button{ .caselog_field_entry_button{
@@ -925,7 +645,7 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
.form_linkedset_toggler > .glyphicon{ .form_linkedset_toggler > .glyphicon{
margin-left: 0.5em; margin-left: 0.5em;
font-size: 0.85em; font-size: 0.85em;
color: #EA7D1E; /* TODO : SASS this to primary color */ color: $combodo-orange;
transition: transform 0.2s linear; transition: transform 0.2s linear;
} }
.form_linkedset_toggler > .glyphicon.collapsed{ .form_linkedset_toggler > .glyphicon.collapsed{
@@ -952,8 +672,8 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
/* FileUpload */ /* FileUpload */
.fileupload_field_content{ .fileupload_field_content{
padding: 8px 23px; padding: 8px 23px;
border: 1px solid #DDDDDD; /* TODO : SASS this */ border: 1px solid $gray-lighter;
background-color: #F9F9F9; /* TODO : SASS this*/ background-color: #F9F9F9;
} }
.fileupload_field_content > div{ .fileupload_field_content > div{
margin-bottom: 15px; margin-bottom: 15px;
@@ -1106,9 +826,9 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
bottom: 5em; bottom: 5em;
right: -2px; /* TODO : SASS this to col-xs-12 padding */ right: -2px; /* TODO : SASS this to col-xs-12 padding */
padding: 15px; padding: 15px;
background-color: #FFF; /* TODO : SASS this to panel bg */ background-color: $white;
border: 1px solid #DDD; /* TODO : SASS this to panel border */ border: 1px solid $gray-lighter;
border-radius: 4px; /* TODO : SASS this to panel border */ border-radius: $border-radius-base;
transition: right 0.3s; transition: right 0.3s;
} }
.form_btn_regular.sticky.closed{ .form_btn_regular.sticky.closed{
@@ -1120,19 +840,15 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
.form_btn_regular.sticky button:first-child{ .form_btn_regular.sticky button:first-child{
margin-bottom: 4px; margin-bottom: 4px;
} }
/* - Adjustments for modal sticky buttons */
.modal.in .form_btn_regular.sticky{
/*right: 15px;*/ /* TODO : SASS this to col-xs-12 padding */
}
} }
/* CKEditor : Adding BS error feedback */ /* CKEditor : Adding BS error feedback */
.form_field div.cke{ .form_field div.cke{
border: 1px solid #dddddd; /* TODO : SASS this */ border: 1px solid $gray-lighter;
} }
.form_field.has-error div.cke{ .form_field.has-error div.cke{
border: 1px solid #D9230F; /* TODO : SASS this */ border: 1px solid $state-danger-border;
border-radius: 3px; /* TODO : SASS this */ border-radius: $border-radius-base;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
} }
/* CKEditor : Styling notifications based on BS alerts */ /* CKEditor : Styling notifications based on BS alerts */
@@ -1142,7 +858,7 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
margin-bottom: 18px; margin-bottom: 18px;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px; border-radius: 4px;
background-color: #FFFFFF background-color: $white
} }
.cke_notification_close{ .cke_notification_close{
position: absolute; position: absolute;
@@ -1154,16 +870,16 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
line-height: 1em; line-height: 1em;
font-size: 1em; font-size: 1em;
} }
.cke_notification_success{ /* TODO : SASS this */ .cke_notification_success{
display: none; display: none;
background-color: #dff0d8; background-color: $alert-success-bg;
border-color: #d6e9c6; border-color: $alert-success-border;
color: #468847; color: $alert-success-text;
} }
.cke_notification_warning{ /* TODO : SASS this */ .cke_notification_warning{
background-color: #fcf8e3; background-color: $alert-warning-bg;
border-color: #fbeed5; border-color: $alert-warning-border;
color: #c09853; color: $alert-warning-text;
} }
/* DataTables : Selection inputs */ /* DataTables : Selection inputs */

14
datamodels/2.x/itop-portal-base/portal/web/css/variables.scss
View File

@@ -20,6 +20,8 @@ $white: #FFFFFF !default;
$combodo-orange: #EA7D1E !default; $combodo-orange: #EA7D1E !default;
$combodo-dark-gray: #585653 !default; $combodo-dark-gray: #585653 !default;
$combodo-orange-dark: darken($combodo-orange, 13.8%) !default;
$combodo-orange-darker: darken($combodo-orange, 18%) !default;
$combodo-dark-gray-dark: darken($combodo-dark-gray, 13.5%) !default; $combodo-dark-gray-dark: darken($combodo-dark-gray, 13.5%) !default;
$combodo-dark-gray-darker: darken($combodo-dark-gray, 18%) !default; $combodo-dark-gray-darker: darken($combodo-dark-gray, 18%) !default;
@@ -175,12 +177,12 @@ $btn-color: $white !default;
$btn-default-color: $gray-darker !default; $btn-default-color: $gray-darker !default;
$btn-default-bg: $white !default; $btn-default-bg: $white !default;
$btn-default-bg-hover: darken($white, 6%) !default; $btn-default-bg-hover: darken($white, 5%) !default;
$btn-default-border: $gray-darker !default; $btn-default-border: $btn-border-default !default;
$btn-primary-color: $white !default; $btn-primary-color: $white !default;
$btn-primary-bg: $brand-primary !default; $btn-primary-bg: $brand-primary !default;
$btn-primary-bg-hover: darken($btn-primary-bg, 6%) !default; $btn-primary-bg-hover: darken($btn-primary-bg, 5%) !default;
$btn-primary-border: $btn-border-default !default; $btn-primary-border: $btn-border-default !default;
$btn-success-color: $white !default; $btn-success-color: $white !default;
@@ -190,17 +192,17 @@ $btn-success-border: $btn-border-default !default;
$btn-info-color: $white !default; $btn-info-color: $white !default;
$btn-info-bg: $brand-info !default; $btn-info-bg: $brand-info !default;
$btn-info-bg-hover: darken($btn-info-bg, 6%) !default; $btn-info-bg-hover: darken($btn-info-bg, 5%) !default;
$btn-info-border: $btn-border-default !default; $btn-info-border: $btn-border-default !default;
$btn-warning-color: $white !default; $btn-warning-color: $white !default;
$btn-warning-bg: $brand-warning !default; $btn-warning-bg: $brand-warning !default;
$btn-warning-bg-hover: darken($btn-warning-bg, 6%) !default; $btn-warning-bg-hover: darken($btn-warning-bg, 5%) !default;
$btn-warning-border: $btn-border-default !default; $btn-warning-border: $btn-border-default !default;
$btn-danger-color: $white !default; $btn-danger-color: $white !default;
$btn-danger-bg: $brand-danger !default; $btn-danger-bg: $brand-danger !default;
$btn-danger-bg-hover: darken($btn-danger-bg, 6%) !default; $btn-danger-bg-hover: darken($btn-danger-bg, 5%) !default;
$btn-danger-border: $btn-border-default !default; $btn-danger-border: $btn-border-default !default;
$btn-link-disabled-color: $gray-light !default; $btn-link-disabled-color: $gray-light !default;