[Libreoffice-commits] online.git: Branch 'distro/collabora/co-4-2' - loleaflet/css loleaflet/src

[Szymon KÅ‚os (via logerrit)]

 loleaflet/css/mobilewizard.css                   |   40 +++++++++++++++++++++++
 loleaflet/src/control/Control.JSDialogBuilder.js |    7 ++--
 2 files changed, 45 insertions(+), 2 deletions(-)

New commits:
commit 64c3aa7407b9fa76d5ec92ba10c7d71d3012a276
Author:     Szymon Kłos <szymon.klos at collabora.com>
AuthorDate: Thu Aug 13 12:19:55 2020 +0200
Commit:     Andras Timar <andras.timar at collabora.com>
CommitDate: Mon Aug 17 18:35:11 2020 +0200

    mobile-wizard: style radio buttons
    
    Change-Id: Iee03b7fceada0ab1166ba35438da50b178a99ce7
    Reviewed-on: https://gerrit.libreoffice.org/c/online/+/100652
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
    Reviewed-by: Andras Timar <andras.timar at collabora.com>

diff --git a/loleaflet/css/mobilewizard.css b/loleaflet/css/mobilewizard.css
index 177cf7877..ace890f29 100644
--- a/loleaflet/css/mobilewizard.css
+++ b/loleaflet/css/mobilewizard.css
@@ -791,6 +791,46 @@ div#mobile-wizard-content .spinfieldcontainer .spinfieldimage.disabled {
 	top: -20px;
 	width: 16px;
 }
+
+#mobile-wizard input[type=radio]:disabled{
+	border: 2px solid #ddd;
+	box-shadow: none;
+}
+#mobile-wizard input[type=radio]{
+	border-radius: 50%;
+	appearance: none;
+	width: 24px;
+	height: 24px;
+	margin: 10px 20px 10px 0px !important;
+	float: right;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	-o-appearance: none;
+	appearance: none;
+	border: 2px solid #aaa;
+	outline: none;
+	box-shadow: #00000015 0px 0px 2px 1px;
+}
+#mobile-wizard input[type=radio]:checked{
+	background: url(images/lc_ok_white.svg) no-repeat center;
+	background-color: #0b87e7;
+	border: 2px solid #0b87e7;
+	outline: none;
+	box-shadow: none;
+}
+#mobile-wizard input[type=radio]:checked:disabled{
+	background-color: #ddd !important;
+	border: 2px solid #ddd !important;
+}
+#mobile-wizard input[type=radio]:before{
+	width: 20px;
+	height: 20px;
+}
+#mobile-wizard input[type=radio]:after{
+	top: -20px;
+	width: 16px;
+}
+
 #enablecontour + label{
 	line-height: 44px;
 	vertical-align: baseline;
diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js b/loleaflet/src/control/Control.JSDialogBuilder.js
index 00bcf2fd3..7f515566d 100644
--- a/loleaflet/src/control/Control.JSDialogBuilder.js
+++ b/loleaflet/src/control/Control.JSDialogBuilder.js
@@ -781,10 +781,13 @@ L.Control.JSDialogBuilder = L.Control.extend({
 	},
 
 	_radiobuttonControl: function(parentContainer, data, builder) {
-		var radiobutton = L.DomUtil.createWithId('input', data.id, parentContainer);
+		var container = L.DomUtil.createWithId('div', data.id + '-container', parentContainer);
+		L.DomUtil.addClass(container, 'radiobutton');
+
+		var radiobutton = L.DomUtil.createWithId('input', data.id, container);
 		radiobutton.type = 'radio';
 
-		var radiobuttonLabel = L.DomUtil.create('label', '', parentContainer);
+		var radiobuttonLabel = L.DomUtil.create('label', '', container);
 		radiobuttonLabel.innerHTML = builder._cleanText(data.text);
 		radiobuttonLabel.for = data.id;