From c0f01083aa1be77bc8d57831dac234d5950722df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 16 Aug 2018 17:24:42 +0200
Subject: [PATCH] MOBILE-2417 quiz: Add push arrow svg mixin
---
.../mod/quiz/pages/navigation-modal/navigation-modal.scss | 6 +++---
src/app/app.scss | 4 ++--
src/theme/variables.scss | 4 ++++
3 files changed, 9 insertions(+), 5 deletions(-)
diff --git a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss b/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss
index de533283d..38bf67187 100644
--- a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss
+++ b/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss
@@ -15,14 +15,14 @@ page-addon-mod-quiz-navigation-modal {
}
.item.core-question-correct .item-inner {
- background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23394e00'/></svg>") !important;
+ @include push-arrow-color($core-question-correct-color);
}
.item.core-question-incorrect .item-inner {
- background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23cb3d4d'/></svg>") !important;
+ @include push-arrow-color($core-question-incorrect-color);
}
.item.core-question-answersaved .item-inner {
- background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%233a3a3a'/></svg>") !important;
+ @include push-arrow-color($text-color);
}
}
diff --git a/src/app/app.scss b/src/app/app.scss
index a0a5cd0e8..9642143e8 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -69,7 +69,6 @@
}
}
-
// Define an alternative way to set a heading in an item without using a heading tag.
// This is done for accessibility reasons when a heading is semantically incorrect.
.item .item-heading {
@@ -475,6 +474,7 @@ ion-col ion-select {
background-color: $core-question-state-incorrect-color;
}
.core-question-answersaved {
+ color: $text-color;
background-color: $core-question-saved-color-bg;
}
@@ -671,7 +671,7 @@ canvas[core-chart] {
.core-white-push-arrow .item-inner{
- background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2020'><path%20d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'%20fill='%23FFFFFF'/></svg>") !important;
+ @include push-arrow-color($white);
}
// For list where some items have detail icon and some others don't.
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index 1faf3f57d..0ec8c8555 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -250,6 +250,10 @@ $core-question-state-incorrect-color: $red-light !default;
transition: $where $time ease-in-out;
}
+@mixin push-arrow-color($color) {
+ background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$color}'/></svg>") !important;
+}
+
// Font Awesome
$fa-font-path: $font-path;
@import "font-awesome";