Merge pull request #937 from dmitrylyzo/fix_radio_style

Fix radio style

src/elements/emby-checkbox/emby-checkbox.css

@@ -55,7 +55,7 @@
     height: 1.83em;
     margin: 0;
     overflow: hidden;
-    border: 2px solid currentcolor;
+    border: 0.14em solid currentcolor;
     border-radius: 0.14em;
     z-index: 2;
     display: flex;

src/elements/emby-radio/emby-radio.css

@@ -4,7 +4,6 @@
     display: inline-block;
     box-sizing: border-box;
     margin: 0;
-    padding-left: 24px;
 }
 
 .radio-label-block {
@@ -31,67 +30,82 @@
     border: none;
 }
 
-.mdl-radio__outer-circle {
+.mdl-radio__circles {
-    position: absolute;
+    position: relative;
-    top: 4px;
+    margin-right: 0.54em;
-    left: 0;
+    width: 1.08em;
-    display: inline-block;
+    height: 1.08em;
-    box-sizing: border-box;
-    width: 16px;
-    height: 16px;
-    margin: 0;
-    cursor: pointer;
-    border: 2px solid currentcolor;
     border-radius: 50%;
-    z-index: 2;
+    cursor: pointer;
 }
 
-.mdl-radio__button:checked + .mdl-radio__label + .mdl-radio__outer-circle {
+.mdl-radio__circles svg {
-    border: 2px solid #00a4dc;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    overflow: visible;
 }
 
-.mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle {
+.mdl-radio__button:disabled + .mdl-radio__circles {
-    border: 2px solid rgba(0, 0, 0, 0.26);
     cursor: auto;
 }
 
+.mdl-radio__button:disabled + .mdl-radio__circles .mdl-radio__outer-circle {
+    color: rgba(0, 0, 0, 0.26);
+}
+
+.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__outer-circle {
+    color: #00a4dc;
+}
+
 .mdl-radio__inner-circle {
-    position: absolute;
+    transition-duration: 0.2s;
-    z-index: 1;
-    margin: 0;
-    top: 8px;
-    left: 4px;
-    box-sizing: border-box;
-    width: 8px;
-    height: 8px;
-    cursor: pointer;
-    transition-duration: 0.28s;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-property: -webkit-transform;
     transition-property: transform;
     transition-property: transform, -webkit-transform;
-    -webkit-transform: scale3d(0, 0, 0);
+    -webkit-transform: scale(0);
-    transform: scale3d(0, 0, 0);
+    transform: scale(0);
+    transform-origin: 50% 50%;
+}
+
+.mdl-radio__button:checked + .mdl-radio__circles .mdl-radio__inner-circle {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+}
+
+.mdl-radio__button:disabled + .mdl-radio__circles .mdl-radio__inner-circle {
+    color: rgba(0, 0, 0, 0.26);
+}
+
+.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__inner-circle {
+    color: #00a4dc;
+}
+
+.mdl-radio__focus-circle {
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    margin: 0;
     border-radius: 50%;
     background: #00a4dc;
+    opacity: 0.26;
+    transition-duration: 0.2s;
+    transition-property: -webkit-transform;
+    transition-property: transform;
+    transition-property: transform, -webkit-transform;
+    -webkit-transform: scale(0);
+    transform: scale(0);
 }
 
-.mdl-radio__button:checked + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
+.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__focus-circle {
-    -webkit-transform: scale3d(1, 1, 1);
+    -webkit-transform: scale(1.75);
-    transform: scale3d(1, 1, 1);
+    transform: scale(1.75);
-}
-
-.mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
-    background: rgba(0, 0, 0, 0.26);
-    cursor: auto;
-}
-
-.mdl-radio__button:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
-    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.76);
-}
-
-.mdl-radio__button:checked:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
-    box-shadow: 0 0 0 10px rgba(0, 164, 220, 0.26);
 }
 
 .mdl-radio__label {

src/elements/emby-radio/emby-radio.js

@@ -1,4 +1,4 @@
-define(['css!./emby-radio', 'registerElement'], function () {
+define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layoutManager) {
     'use strict';
 
     var EmbyRadioPrototype = Object.create(HTMLInputElement.prototype);
@@ -23,6 +23,7 @@ define(['css!./emby-radio', 'registerElement'], function () {
     }
 
     EmbyRadioPrototype.attachedCallback = function () {
+        var showFocus = !layoutManager.mobile;
 
         if (this.getAttribute('data-radio') === 'true') {
             return;
@@ -37,13 +38,36 @@ define(['css!./emby-radio', 'registerElement'], function () {
         labelElement.classList.add('mdl-radio');
         labelElement.classList.add('mdl-js-radio');
         labelElement.classList.add('mdl-js-ripple-effect');
+        if (showFocus) {
+            labelElement.classList.add('show-focus');
+        }
 
         var labelTextElement = labelElement.querySelector('span');
 
         labelTextElement.classList.add('radioButtonLabel');
         labelTextElement.classList.add('mdl-radio__label');
 
-        labelElement.insertAdjacentHTML('beforeend', '<span class="mdl-radio__outer-circle"></span><span class="mdl-radio__inner-circle"></span>');
+        var html = '';
+
+        html += '<div class="mdl-radio__circles">';
+
+        html += '<svg>';
+        html += '<defs>';
+        html += '<clipPath id="cutoff">';
+        html += '<circle cx="50%" cy="50%" r="50%" />';
+        html += '</clipPath>';
+        html += '</defs>';
+        html += '<circle class="mdl-radio__outer-circle" cx="50%" cy="50%" r="50%" fill="none" stroke="currentcolor" stroke-width="0.26em" clip-path="url(#cutoff)" />';
+        html += '<circle class="mdl-radio__inner-circle" cx="50%" cy="50%" r="25%" fill="currentcolor" />';
+        html += '</svg>';
+
+        if (showFocus) {
+            html += '<div class="mdl-radio__focus-circle"></div>';
+        }
+
+        html += '</div>';
+
+        this.insertAdjacentHTML('afterend', html);
 
         this.addEventListener('keydown', onKeyDown);
     };

src/themes/purplehaze/theme.css

@@ -382,7 +382,7 @@ a[data-role=button] {
 
 .emby-checkbox:checked + span + .checkboxOutline {
     background-color: #030322;
-    border: 2px solid rgb(72, 195, 200);
+    border: 0.14em solid rgb(72, 195, 200);
 }
 
 .emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-checked {
@@ -394,7 +394,7 @@ a[data-role=button] {
 }
 
 .emby-checkbox:focus:not(:checked) + span + .checkboxOutline {
-    border: 2px solid #ff77f1;
+    border: 0.14em solid #ff77f1;
 }
 
 .itemProgressBarForeground {
@@ -438,6 +438,15 @@ a[data-role=button] {
     color: #f8f8fe;
 }
 
+.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles svg .mdl-radio__outer-circle,
+.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles svg .mdl-radio__inner-circle {
+    color: #ff77f1;
+}
+
+.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__focus-circle {
+    background: #00a4dc;
+}
+
 .emby-tab-button {
     color: #999;
 }