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

git-svn-id: http://svn.code.sf.net/p/itop/code/trunk@4220 a333f486-631f-4898-b8df-5754b55c2be0

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

@@ -313,6 +313,12 @@ class ApplicationHelper
 				'bricks' => array(),
 				'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
 			foreach ($oDesign->GetNodes('/module_design/properties/*') as $oPropertyNode)
 			{

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

@@ -8,7 +8,7 @@
 
 {% block pMainHeaderActions %}
 	{% 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 %}
 			<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 %}

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

@@ -8,7 +8,7 @@
 
 {% block pMainHeaderActions %}
 	{% 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 %}
 				<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 %}

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

@@ -169,7 +169,7 @@
 		
 		{# Sidebar navigation menu for normal screens #}
 		<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>
 				<div class="user_infos">

datamodels/2.x/itop-portal-base/portal/web/css/bootstrap-theme-combodo.scss

@@ -2097,28 +2097,32 @@ fieldset[disabled] .btn {
     opacity: 0.65;
     filter: alpha(opacity=65);
     -webkit-box-shadow: none;
-    box-shadow: none
+    box-shadow: none;
 }
 a.btn.disabled,
 fieldset[disabled] a.btn {
-    pointer-events: none
+    pointer-events: none;
 }
 .btn-default {
     color: $btn-default-color;
     background-color: $btn-default-bg;
-    border: $btn-default-border
+    border: $btn-default-border;
 }
 .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 {
-    box-shadow: $btn-bg-shadow;
+	background-color: $btn-default-bg-hover;
+    border: $btn-default-border;
 }
 .btn-default:active,
 .btn-default.active,
 .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,
@@ -2129,12 +2133,14 @@ fieldset[disabled] a.btn {
 .btn-default:active.focus,
 .btn-default.active.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,
 .open>.dropdown-toggle.btn-default {
-    background-image: none
+	background-color: $btn-default-bg-hover;
+    border: $btn-default-border;
 }
 .btn-default.disabled,
 .btn-default[disabled],
@@ -2164,19 +2170,22 @@ fieldset[disabled] .btn-default.active {
 .btn-primary {
     color: $btn-primary-color;
     background-color: $btn-primary-bg;
-    border: $btn-primary-border
+    border: $btn-primary-border;
 }
 .btn-primary:focus,
 .btn-primary.focus {
-    box-shadow: $btn-bg-shadow;
+	background-color: $btn-primary-bg-hover;
+    border: $btn-primary-border;
 }
 .btn-primary:hover {
-    box-shadow: $btn-bg-shadow;
+	background-color: $btn-primary-bg-hover;
+    border: $btn-primary-border;
 }
 .btn-primary:active,
 .btn-primary.active,
 .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,
@@ -2187,12 +2196,14 @@ fieldset[disabled] .btn-default.active {
 .btn-primary:active.focus,
 .btn-primary.active.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,
 .open>.dropdown-toggle.btn-primary {
-    background-image: none
+	background-color: $btn-primary-bg-hover;
+    border: $btn-primary-border;
 }
 .btn-primary.disabled,
 .btn-primary[disabled],
@@ -2226,15 +2237,18 @@ fieldset[disabled] .btn-primary.active {
 }
 .btn-success:focus,
 .btn-success.focus {
-    box-shadow: $btn-bg-shadow;
+    background-color: $btn-success-bg-hover;
+    border: $btn-success-border
 }
 .btn-success:hover {
-    box-shadow: $btn-bg-shadow;
+    background-color: $btn-success-bg-hover;
+    border: $btn-success-border
 }
 .btn-success:active,
 .btn-success.active,
 .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,
@@ -2245,12 +2259,14 @@ fieldset[disabled] .btn-primary.active {
 .btn-success:active.focus,
 .btn-success.active.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,
 .open>.dropdown-toggle.btn-success {
-    background-image: none
+    background-color: $btn-success-bg-hover;
+    border: $btn-success-border
 }
 .btn-success.disabled,
 .btn-success[disabled],
@@ -2274,8 +2290,8 @@ fieldset[disabled] .btn-success.active {
     border-color: #469408
 }
 .btn-success .badge {
-    color: #469408;
-    background-color: #ffffff
+    color: $btn-success-color;
+    background-color: $btn-success-bg;
 }
 .btn-info {
     color: $btn-info-color;
@@ -2284,15 +2300,18 @@ fieldset[disabled] .btn-success.active {
 }
 .btn-info:focus,
 .btn-info.focus {
-    box-shadow: $btn-bg-shadow
+    background-color: $btn-info-bg-hover;
+    border: $btn-info-border
 }
 .btn-info:hover {
-    box-shadow: $btn-bg-shadow
+    background-color: $btn-info-bg-hover;
+    border: $btn-info-border
 }
 .btn-info:active,
 .btn-info.active,
 .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,
@@ -2303,12 +2322,14 @@ fieldset[disabled] .btn-success.active {
 .btn-info:active.focus,
 .btn-info.active.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,
 .open>.dropdown-toggle.btn-info {
-    background-image: none
+    background-color: $btn-info-bg-hover;
+    border: $btn-info-border
 }
 .btn-info.disabled,
 .btn-info[disabled],
@@ -2332,8 +2353,8 @@ fieldset[disabled] .btn-info.active {
     border-color: #029acf
 }
 .btn-info .badge {
-    color: #029acf;
-    background-color: #ffffff
+    color: $btn-info-color;
+    background-color: $btn-info-bg;
 }
 .btn-warning {
     color: $btn-warning-color;
@@ -2342,15 +2363,18 @@ fieldset[disabled] .btn-info.active {
 }
 .btn-warning:focus,
 .btn-warning.focus {
-    box-shadow: $btn-bg-shadow;
+    background-color: $btn-warning-bg-hover;
+    border: $btn-warning-border;
 }
 .btn-warning:hover {
-    box-shadow: $btn-bg-shadow;
+    background-color: $btn-warning-bg-hover;
+    border: $btn-warning-border;
 }
 .btn-warning:active,
 .btn-warning.active,
 .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,
@@ -2361,12 +2385,14 @@ fieldset[disabled] .btn-info.active {
 .btn-warning:active.focus,
 .btn-warning.active.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,
 .open>.dropdown-toggle.btn-warning {
-    background-image: none
+    background-color: $btn-warning-bg-hover;
+    border: $btn-warning-border;
 }
 .btn-warning.disabled,
 .btn-warning[disabled],
@@ -2390,25 +2416,28 @@ fieldset[disabled] .btn-warning.active {
     border-color: #9b479f
 }
 .btn-warning .badge {
-    color: #9b479f;
-    background-color: #ffffff
+    color: $btn-warning-color;
+    background-color: $btn-warning-bg;
 }
 .btn-danger {
     color: $btn-danger-color;
     background-color: $btn-danger-bg;
-    border: $btn-danger-border
+    border: $btn-danger-border;
 }
 .btn-danger:focus,
 .btn-danger.focus {
-    box-shadow: $btn-bg-shadow;
+    background-color: $btn-danger-bg-hover;
+    border: $btn-danger-border;
 }
 .btn-danger:hover {
-    box-shadow: $btn-bg-shadow;
+    background-color: $btn-danger-bg-hover;
+    border: $btn-danger-border;
 }
 .btn-danger:active,
 .btn-danger.active,
 .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,
@@ -2419,12 +2448,14 @@ fieldset[disabled] .btn-warning.active {
 .btn-danger:active.focus,
 .btn-danger.active.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,
 .open>.dropdown-toggle.btn-danger {
-    background-image: none
+    background-color: $btn-danger-bg-hover;
+    border: $btn-danger-border;
 }
 .btn-danger.disabled,
 .btn-danger[disabled],
@@ -2448,8 +2479,8 @@ fieldset[disabled] .btn-danger.active {
     border-color: #d9831f
 }
 .btn-danger .badge {
-    color: #d9831f;
-    background-color: #ffffff
+    color: $btn-danger-color;
+    background-color: $btn-danger-bg;
 }
 .btn-link {
     color: $brand-primary;
@@ -3584,12 +3615,21 @@ select[multiple].input-group-sm>.input-group-btn>.btn {
         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 {
     background-color: $combodo-dark-gray;
     border-color: none;
 }
 .navbar-default .navbar-brand {
-    color: $gray
+    color: $gray;
 }
 .navbar-default .navbar-brand:hover,
 .navbar-default .navbar-brand:focus {
@@ -3597,13 +3637,13 @@ select[multiple].input-group-sm>.input-group-btn>.btn {
     background-color: transparent
 }
 .navbar-default .navbar-text {
-    color: $gray
+    color: $gray;
 }
 .navbar-default .navbar-nav>li>a {
-    color: $white
+    color: white;
 }
 .navbar-default .navbar-nav>.active>a {
-    color: $white;
+    color: white;
     background-color: $combodo-dark-gray-darker;
 	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:hover,
 .navbar-default .navbar-nav>.disabled>a:focus {
-    color: #444444;
+    color: $gray-dark;
     background-color: transparent
 }
 .navbar-default .navbar-toggle {
-    border-color: #dddddd;
+    border-color: $gray-lighter;
 	border-top: none;
 	border-right: none;
 	border-bottom: none;
@@ -3634,6 +3674,7 @@ select[multiple].input-group-sm>.input-group-btn>.btn {
 }
 .navbar-default .navbar-toggle .icon-bar {
     height: 3px;
+	background-color: $gray;
 }
 .navbar-default .navbar-collapse,
 .navbar-default .navbar-form {
@@ -3646,9 +3687,13 @@ select[multiple].input-group-sm>.input-group-btn>.btn {
     color: $brand-primary
 }
 @media (max-width: 767px) {
-	.navbar-default .navbar-nav .open .dropdown-menu .divider{
-		background-color: $combodo-dark-gray-dark;
-	}
+    .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 {
+        background-color: $combodo-dark-gray-dark;
+    }
     .navbar-default .navbar-nav .open .dropdown-menu>li>a {
         color: $white;
 		background-color: inherit;
@@ -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:hover,
     .navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus {
-        color: #444444;
+        color: $gray-dark;
         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 {
-    color: $gray
+    color: $white
 }
 .navbar-default .navbar-link:hover {
     color: $brand-primary
 }
 .navbar-default .btn-link {
-    color: $gray
+    color: $white
 }
 .navbar-default .btn-link:hover,
 .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,
 .navbar-default .btn-link[disabled]:focus,
 fieldset[disabled] .navbar-default .btn-link:focus {
-    color: #444444
+    color: $gray-dark
 }
 .navbar-inverse {
     background-color: $brand-primary;
-    border-color: $brand-primary-dark
+    border-color: $brand-primary-dark;
 }
 .navbar-inverse .navbar-brand {
-    color: #fac0ba
+    color: $white
 }
 .navbar-inverse .navbar-brand:hover,
 .navbar-inverse .navbar-brand:focus {
-    color: #ffffff;
+    color: $brand-primary;
     background-color: transparent
 }
 .navbar-inverse .navbar-text {
-    color: #fac0ba
+    color: $white;
 }
 .navbar-inverse .navbar-nav>li>a {
-    color: #fac0ba
+    color: $white
 }
-.navbar-inverse .navbar-nav>li>a:hover,
-.navbar-inverse .navbar-nav>li>a:focus {
-    color: #ffffff;
-    background-color: transparent
+.navbar-inverse .navbar-nav>.active>a {
+    color: $white;
+    background-color: $combodo-orange-darker;
+	font-weight: 600
 }
-.navbar-inverse .navbar-nav>.active>a,
+.navbar-inverse .navbar-nav>li>a:hover,
+.navbar-inverse .navbar-nav>li>a:focus,
 .navbar-inverse .navbar-nav>.active>a:hover,
 .navbar-inverse .navbar-nav>.active>a:focus {
-    color: #ffffff;
-    background-color: transparent
+    color: $combodo-orange;
+    background-color: $white
 }
 .navbar-inverse .navbar-nav>.disabled>a,
 .navbar-inverse .navbar-nav>.disabled>a:hover,
 .navbar-inverse .navbar-nav>.disabled>a:focus {
-    color: #cccccc;
+    color: $gray-dark;
     background-color: transparent
 }
 .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:focus {
-    background-color: $brand-primary-dark
+    background-color: inherit;
 }
 .navbar-inverse .navbar-toggle .icon-bar {
-    background-color: #ffffff
+    height: 3px;
+	background-color: $white;
 }
 .navbar-inverse .navbar-collapse,
 .navbar-inverse .navbar-form {
-    border-color: #b81e0d
+    border: none;
 }
 .navbar-inverse .navbar-nav>.open>a,
 .navbar-inverse .navbar-nav>.open>a:hover,
 .navbar-inverse .navbar-nav>.open>a:focus {
     background-color: transparent;
-    color: #ffffff
+    color: $brand-primary
 }
 @media (max-width: 767px) {
-    .navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header {
-        border-color: $brand-primary-dark
-    }
-    .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
-        background-color: $brand-primary-dark
-    }
+	.navbar-inverse .navbar-nav .divider,
+	.navbar-inverse .navbar-nav .open .dropdown-menu .divider{
+		background-color: $combodo-orange-darker;
+	}
     .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:focus {
-        color: #ffffff;
+        color: $brand-primary;
         background-color: transparent
     }
     .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:focus {
-        color: #ffffff;
+        color: $brand-primary;
         background-color: transparent
     }
     .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:focus {
-        color: #cccccc;
+        color: #444444;
         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 {
-    color: #fac0ba
+    color: $white
 }
 .navbar-inverse .navbar-link:hover {
-    color: #ffffff
+    color: $brand-primary
 }
 .navbar-inverse .btn-link {
-    color: #fac0ba
+    color: $white
 }
 .navbar-inverse .btn-link:hover,
 .navbar-inverse .btn-link:focus {
-    color: #ffffff
+    color: $brand-primary
 }
 .navbar-inverse .btn-link[disabled]:hover,
 fieldset[disabled] .navbar-inverse .btn-link:hover,
 .navbar-inverse .btn-link[disabled]:focus,
 fieldset[disabled] .navbar-inverse .btn-link:focus {
-    color: #cccccc
+    color: #444444
 }
 .breadcrumb {
     padding: 8px 15px;
@@ -5865,74 +5932,27 @@ button.close {
 }
 .btn-default,
 .btn-default:hover {
-    background-image: -webkit-linear-gradient(#4f5151, #474949 6%, #3f4141);
-    background-image: -o-linear-gradient(#4f5151, #474949 6%, #3f4141);
-    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
+    color: $btn-default-color;
+    border: $btn-default-border
 }
 .btn-primary,
 .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
 }
 .btn-success,
 .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
 }
 .btn-info,
 .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
 }
 .btn-warning,
 .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
 }
 .btn-danger,
 .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
 }
 body {
@@ -5947,57 +5967,6 @@ legend {
 label {
     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 {
     color: #444444
 }
@@ -6009,3 +5978,25 @@ label {
 .pager .disabled>a {
     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);
+}

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

@@ -1,3 +1,5 @@
+@import 'variables.scss';
+
 /*!
  * Combodo portal template v1.0.0
 */
@@ -56,7 +58,7 @@ footer{
 	background-size: 100%;
 	background-position: center center;
 	background-color: #585653;
-	border: 2px solid #FFFFFF;
+	border: 2px solid $white;
 	border-radius: 100%;
 	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
 }
@@ -65,7 +67,7 @@ footer{
 	position: absolute;
 	padding-left: 85px;
 	max-width: 55%;
-	color: #FFFFFF;
+	/*color: $white;*/
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow-x: hidden;
@@ -81,12 +83,7 @@ footer{
 	}
 	#sidebar .user_card{
 		padding: 30px 0px;
-		background-color: #EA7D1E;
-		background-image: url('../img/backgrounds/geometric-orange.svg');
-		background-size: 170%;
-		background-position: 60% 60%;
 		text-align: center;
-		box-shadow: -3px 2px 3px rgba(0, 0, 0, 0.4);
 	}
 	#sidebar .user_card .user_photo{
 		margin: 0px auto 10px auto;
@@ -96,15 +93,15 @@ footer{
 		background-position: center center;
 		background-color: #585653;
 		background-repeat: no-repeat;
-		border: 2px solid #FFFFFF;
+		border: 2px solid $white;
 		border-radius: 100%;
 	}
 	#sidebar .user_card .user_infos{
 		font-size: 1em;
-		color: #FFFFFF;
+		color: $white;
 	}
 	#sidebar .user_card .user_infos .dropdown-toggle{
-		color: #FFFFFF;
+		color: $white;
 	}
 	#sidebar .user_card .user_options.dropdown-menu{
 		width: 92%;
@@ -121,42 +118,6 @@ footer{
 	#sidebar .menu .navbar-nav > li{
 		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{
 		width: 1.2em;
 		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 */
 /*********************/
-/*body{
-	background-color: #EDECEC;
-}
-a{
-	color: #D46201;
-}
-a:hover, a:focus{
-	color: #C15A02; /* TODO : Darken #D46201 */
-/*}
-.pagination{
-	margin: 14px 0px; 
-}*/
 .list-group.tree{
 	margin-top: 11px;
 	margin-bottom: -11px;
@@ -323,184 +259,12 @@ a:hover, a:focus{
 .list-group.tree .list-group-item{
 	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" */
 .glyphicon-ext-hierarchy:before {
     content: url('../img/icons/hierarchy-white-13px.png');
 }
 
-/**********************/
-/* BS plugin override */
-/**********************/
-/* Datatables */
-/*.table-striped > tbody > tr:hover {
-	background-color: #fdf5d0;
-}*/
-
 /******************/
 /* Modal settings */
 /******************/
@@ -509,13 +273,6 @@ a:hover, a:focus{
 	text-align: center;
 }
 
-/*@media (min-width: 992px){
-	.modal-lg {
-		width: 80%;
-		max-width: 1200px;
-	}
-}*/
-
 /**************************/
 /* MagnificPopup settings */
 /**************************/
@@ -564,7 +321,7 @@ a:hover, a:focus{
 	margin-bottom: 8px;
 	padding: 0em 1em;
 	min-height: 4em;
-	background-color: #FFFFFF;
+	background-color: $white;
     background-image: none;
     border: none;
 	border-radius: 0px;
@@ -678,11 +435,13 @@ a:hover, a:focus{
 #main-header-actions{
 	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;
 	line-height: 2.4em;
 	font-size: 14px;
-}
+	background-image: none;
+}*/
 @media (min-width: 768px) {
 	#main-header:after{
 		clear: both;
@@ -748,10 +507,6 @@ a:hover, a:focus{
 #brick_content_tree{
 	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{
 	/*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){
 	margin-left: 10px;
 }
-/*.list-group-item .list-group-item-text{
-	margin-left: 5px;
-	font-size: 1em;
-	line-height: 1em;
-}*/
 .list-group-item .keep-spinning{
 	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 */
 #brick_tree_overlay{
-	/*z-index: 10;*/
 	display: none;
 	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;
-	/*opacity: 0.5;
-	color: white;*/
 	font-size: 1em;
 }
 /****************/
@@ -847,42 +587,22 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 /*********/
 /* Forms */
 /*********/
-/*.form_fields textarea{
-	height: 160px;
-}*/
 .form_field .form_mandatory .control-label:after{
 	content: "\002a";
 	position: relative;
 	left: 3px;
-	color: red; /* TODO : SASS this */
+	color: $brand-primary;
 	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_entry{
-	border: 1px solid #dddddd;
+	border: 1px solid $gray-lighter;
 	border-top: none;
 }
 .caselog_field_entry_header{
 	padding: 6px;
 	font-size: 1em;
-	border-bottom: 1px solid #FFFFFF;
+	border-bottom: 1px solid $white;
 	background-color: #F2F2F2;
 }
 .caselog_field_entry_button{
@@ -925,7 +645,7 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 .form_linkedset_toggler > .glyphicon{
 	margin-left: 0.5em;
 	font-size: 0.85em;
-	color: #EA7D1E; /* TODO : SASS this to primary color */
+	color: $combodo-orange;
 	transition: transform 0.2s linear;
 }
 .form_linkedset_toggler > .glyphicon.collapsed{
@@ -952,8 +672,8 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 /* FileUpload */
 .fileupload_field_content{
 	padding: 8px 23px;
-	border: 1px solid #DDDDDD; /* TODO : SASS this */
-	background-color: #F9F9F9; /* TODO : SASS this*/
+	border: 1px solid $gray-lighter;
+	background-color: #F9F9F9;
 }
 .fileupload_field_content > div{
 	margin-bottom: 15px;
@@ -1106,9 +826,9 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 		bottom: 5em;
 		right: -2px; /* TODO : SASS this to col-xs-12 padding */
 		padding: 15px;
-		background-color: #FFF; /* TODO : SASS this to panel bg */
-		border: 1px solid #DDD; /* TODO : SASS this to panel border */
-		border-radius: 4px; /* TODO : SASS this to panel border */
+		background-color: $white;
+		border: 1px solid $gray-lighter;
+		border-radius: $border-radius-base;
 		transition: right 0.3s;
 	}
 	.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{
 		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 */
 .form_field div.cke{
-    border: 1px solid #dddddd; /* TODO : SASS this */
+    border: 1px solid $gray-lighter;
 }
 .form_field.has-error div.cke{
-	border: 1px solid #D9230F; /* TODO : SASS this */
-	border-radius: 3px; /* TODO : SASS this */
+	border: 1px solid $state-danger-border;
+	border-radius: $border-radius-base;
 	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
 }
 /* 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;
     border: 1px solid transparent;
     border-radius: 4px;
-	background-color: #FFFFFF
+	background-color: $white
 }
 .cke_notification_close{
 	position: absolute;
@@ -1154,16 +870,16 @@ table .group-actions .item-action-wrapper .panel-body > p:last-child{
 	line-height: 1em;
 	font-size: 1em;
 }
-.cke_notification_success{ /* TODO : SASS this */
+.cke_notification_success{
 	display: none;
-	background-color: #dff0d8;
-    border-color: #d6e9c6;
-    color: #468847;
-}
-.cke_notification_warning{ /* TODO : SASS this */
-    background-color: #fcf8e3;
-    border-color: #fbeed5;
-    color: #c09853;
+	background-color: $alert-success-bg;
+    border-color: $alert-success-border;
+    color: $alert-success-text;
+}
+.cke_notification_warning{
+    background-color: $alert-warning-bg;
+    border-color: $alert-warning-border;
+    color: $alert-warning-text;
 }
 
 /* DataTables : Selection inputs */

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

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