From 750bbb68a8ad269f6c888e46e5c77d8ae5003143 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Mudr=C3=A1k?= <david@moodle.com>
Date: Mon, 17 Apr 2017 20:26:39 +0200
Subject: [PATCH] MDL-58426 icons: Fix CSS for displaying big icons

The expected size of icons in the pix/b/ (big) folder was not respected
and they were displayed as 16x16 px.
---
 lib/outputcomponents.php                  |  5 +++++
 theme/boost/scss/moodle/icons.scss        |  9 +++++++++
 theme/bootstrapbase/less/moodle/core.less | 15 +++++++++++++--
 theme/bootstrapbase/style/moodle.css      |  4 ++++
 4 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/lib/outputcomponents.php b/lib/outputcomponents.php
index eb3da9c37d3..3ec3b99642f 100644
--- a/lib/outputcomponents.php
+++ b/lib/outputcomponents.php
@@ -662,6 +662,11 @@ class pix_icon implements renderable, templatable {
             $this->attributes['class'] = '';
         }
 
+        // Set an additional class for big icons so that they can be styled properly.
+        if (substr($pix, 0, 2) === 'b/') {
+            $this->attributes['class'] .= ' iconsize-big';
+        }
+
         // If the alt is empty, don't place it in the attributes, otherwise it will override parent alt text.
         if (!is_null($alt)) {
             $this->attributes['alt'] = $alt;
diff --git a/theme/boost/scss/moodle/icons.scss b/theme/boost/scss/moodle/icons.scss
index 3587eb6d9ec..d1826a6a2cb 100644
--- a/theme/boost/scss/moodle/icons.scss
+++ b/theme/boost/scss/moodle/icons.scss
@@ -1,8 +1,12 @@
 // The only class we need for icons is .icon
 // Standardize the size, padding and alignment for all icons in Moodle.
 
+// Size of default icons.
 $icon-width: 16px;
 $icon-height: 16px;
+// Size of big icons.
+$icon-big-width: 64px;
+$icon-big-height: 64px;
 
 .icon {
     font-size: $icon-height;
@@ -17,6 +21,11 @@ $icon-height: 16px;
     &.spacer {
         margin-right: 0;
     }
+
+    &.iconsize-big {
+        width: $icon-big-width;
+        height: $icon-big-height;
+    }
 }
 
 $icon-color: $body-color !default;
diff --git a/theme/bootstrapbase/less/moodle/core.less b/theme/bootstrapbase/less/moodle/core.less
index a927e3c5ec2..6b8c2d51071 100644
--- a/theme/bootstrapbase/less/moodle/core.less
+++ b/theme/bootstrapbase/less/moodle/core.less
@@ -16,6 +16,13 @@
     display: none;
 }
 
+// Size of default icons.
+@icon-width: 16px;
+@icon-height: 16px;
+// Size of big icons.
+@icon-big-width: 64px;
+@icon-big-height: 64px;
+
 /* Default Three Columns - All
 ------------------------------*/
 
@@ -233,10 +240,14 @@ img.resize {
 }
 /* Icon styles */
 img.icon {
-    height: 16px;
+    height: @icon-height;
     vertical-align: text-bottom;
-    width: 16px;
+    width: @icon-width;
     padding-right: 6px;
+    &.iconsize-big {
+        width: @icon-big-width;
+        height: @icon-big-height;
+    }
 }
 img.iconsmall {
     height: 12px;
diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index 7157d4f5371..dc43357a5e2 100644
--- a/theme/bootstrapbase/style/moodle.css
+++ b/theme/bootstrapbase/style/moodle.css
@@ -2546,6 +2546,10 @@ img.icon {
   width: 16px;
   padding-right: 6px;
 }
+img.icon.iconsize-big {
+  width: 64px;
+  height: 64px;
+}
 img.iconsmall {
   height: 12px;
   margin-right: 3px;