[4.0] Background and color change to quickicons (#17062)

* Header icons styling * Quickicons styling * Background and color change to quickicons * AA compliant for small text
joomla · Jul 14, 2017 · e4b5658 · e4b5658
1 parent 7132bc3
commit e4b5658
Show file tree

Hide file tree

Showing 10 changed files with 36 additions and 27 deletions.
diff --git a/administrator/components/com_cpanel/tmpl/cpanel/default.php b/administrator/components/com_cpanel/tmpl/cpanel/default.php
@@ -14,22 +14,21 @@
 $user = JFactory::getUser();
 ?>
 
-<div class="row">
-
+<div class="quickicons-container">
 	<?php $iconmodules = JModuleHelper::getModules('icon');
 	if ($iconmodules) : ?>
 		<div class="col-md-12">
-			<div class="cpanel-links mb-sm-3 pt-3 pb-3">
-				<?php
-				// Display the submenu position modules
-				foreach ($iconmodules as $iconmodule)
-				{
-					echo JModuleHelper::renderModule($iconmodule);
-				}
-				?>
-			</div>
+			<?php
+			// Display the submenu position modules
+			foreach ($iconmodules as $iconmodule)
+			{
+				echo JModuleHelper::renderModule($iconmodule);
+			}
+			?>
 		</div>
 	<?php endif; ?>
+</div>
+<div class="row">
 
 	<?php
 	$cols = 0;

diff --git a/administrator/modules/mod_stats_admin/tmpl/default.php b/administrator/modules/mod_stats_admin/tmpl/default.php
@@ -9,7 +9,7 @@
 
 defined('_JEXEC') or die;
 ?>
-<ul class="list-group list-group-flush stats-module<?php echo $moduleclass_sfx ?>">
+<ul class="list-group list-group-flush stats-module <?php echo $moduleclass_sfx ?>">
 	<?php foreach ($list as $item) : ?>
 		<li class="list-group-item"><span class="mr-2 ml-2 icon-<?php echo $item->icon; ?>" title="<?php echo $item->title; ?>" aria-hidden="true"></span> <?php echo $item->title; ?> <?php echo $item->data; ?></li>
 	<?php endforeach; ?>

diff --git a/administrator/templates/atum/css/bootstrap.min.css b/administrator/templates/atum/css/bootstrap.min.css
diff --git a/administrator/templates/atum/css/template-rtl.css.map b/administrator/templates/atum/css/template-rtl.css.map
diff --git a/administrator/templates/atum/css/template-rtl.min.css b/administrator/templates/atum/css/template-rtl.min.css
diff --git a/administrator/templates/atum/css/template.css.map b/administrator/templates/atum/css/template.css.map
diff --git a/administrator/templates/atum/css/template.min.css b/administrator/templates/atum/css/template.min.css
diff --git a/administrator/templates/atum/scss/_variables.scss b/administrator/templates/atum/scss/_variables.scss
@@ -11,7 +11,7 @@ $atum-hl-grad-inner:               #59afff;
 $atum-hl-grad-outer:               #59daff;
 
 $brand-primary:                    #006898;
-$brand-success:                    #348534;
+$brand-success:                    #438243;
 $brand-info:                       #5bc0de;
 $brand-warning:                    #f0ad4e;
 $brand-danger:                     #d9534f;
@@ -110,5 +110,8 @@ $modal-header-height:              46px;
 // Badges
 $badge-default-bg:                 #5e7082;
 
+// Quickicons
+$quickicon-bg:                     #447aad;
+
 // Gutter
 $grid-gutter-width-base:           15px !default;
diff --git a/administrator/templates/atum/scss/blocks/_quickicons.scss b/administrator/templates/atum/scss/blocks/_quickicons.scss
@@ -1,7 +1,13 @@
 // Quick Icons
 
+.quickicons-container {
+  padding: 18px ($grid-gutter-width-base / 2) 0;
+  margin: -$grid-gutter-width-base;
+  margin-bottom: $grid-gutter-width-base;
+  background-color: $atum-template-color;
+}
+
 .quick-icons {
-  margin-bottom: -14px;
 
   *,
   *::before,
@@ -15,7 +21,8 @@
     margin-bottom: 15px;
     overflow: hidden;
     color: $white-offset;
-    background-color: $atum-template-color;
+    background-color: $quickicon-bg;
+    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.1) 100%);
     border-radius: $border-radius;
 
     @include media-breakpoint-only(xs) {
@@ -25,7 +32,6 @@
       overflow: visible;
       color: $white;
       text-align: center;
-      background: $atum-template-color;
       border-radius: 50%;
     }
 
@@ -39,9 +45,10 @@
     &:hover,
     &:focus {
       text-decoration: none;
+      background-color: lighten($quickicon-bg, 5%);
 
       &::before {
-        color: lighten($atum-template-color, 10%);
+        color: lighten($quickicon-bg, 12%);
       }
 
     }
@@ -73,7 +80,7 @@
         font-size: 2.5rem;
         font-weight: normal;
         line-height: 4.7rem;
-        background-color: lighten($atum-template-color, 10%);
+        background-color: rgba(255,255,255,.1);
         border-right: 1px solid rgba($white,.15);
 
         @include media-breakpoint-only(xs) {
@@ -95,7 +102,7 @@
       right: -40px;
       font-family: FontAwesome;
       font-size: 10em;
-      color: lighten($atum-template-color, 5%);
+      color: lighten($quickicon-bg, 5%);
       content: "\f1aa";
       transform: rotate(20deg);
 
@@ -147,15 +154,15 @@
     }
 
     @include media-breakpoint-only(xs) {
-      background: $brand-success;
+      background: lighten($brand-success, 7%);
       animation: none;
     }
 
     span {
 
       &[class*=" icon-"],
       &[class^="icon-"] {
-        background-color: $brand-success;
+        background-color: lighten($brand-success, 7%);
 
         @include media-breakpoint-only(xs) {
           background: none;

diff --git a/administrator/templates/atum/scss/blocks/_sidebar.scss b/administrator/templates/atum/scss/blocks/_sidebar.scss
@@ -18,7 +18,7 @@
   height: 100%;
   margin-left: 0;
   background-color: $atum-template-color;
-  box-shadow: 0 3px 10px rgba(0,0,0,.5), inset -1px 0 0 rgba(0,0,0,.2);
+  box-shadow: 0 3px 10px rgba(0,0,0,.5);
   transition: all .3s ease;
   .sidebar-brand {
     position: absolute;