This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/feature/jewel-ui-set by this 
push:
     new d1ef88d  radiobutton almost done but as checbox needs of #35 solved to 
be finished
d1ef88d is described below

commit d1ef88d89343d4711f11f5bd565b5b7599710656
Author: Carlos Rovira <[email protected]>
AuthorDate: Sun Mar 25 17:32:53 2018 +0200

    radiobutton almost done but as checbox needs of #35 solved to be finished
---
 .../src/main/royale/RadioButtonPlayGround.mxml     |  14 +-
 .../royale/org/apache/royale/jewel/CheckBox.as     |   6 +-
 .../royale/org/apache/royale/jewel/RadioButton.as  | 433 +++++++++++++++++++--
 .../main/resources/assets/radiobutton-circle.svg   |  19 +
 .../JewelTheme/src/main/resources/defaults.css     |  57 ++-
 .../src/main/sass/components/_radiobutton.sass     |  93 ++++-
 6 files changed, 553 insertions(+), 69 deletions(-)

diff --git 
a/examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml 
b/examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml
index 14da2a1..3d34b18 100644
--- a/examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/RadioButtonPlayGround.mxml
@@ -29,9 +29,17 @@ limitations under the License.
        
        <html:H3 text="Jewel RadioButton"/>
 
-       <j:RadioButton text="RadioButton 1"/>
-       <j:RadioButton text="RadioButton 2"/>
-       <j:RadioButton text="RadioButton Disabled">
+       <j:RadioButton text="RadioButton 1" groupName="radios" value="Test 1"/>
+       <j:RadioButton text="RadioButton 2" groupName="radios" value="Test 2"/>
+       <j:RadioButton text="RadioButton 3" groupName="radios" value="Test 3"/>
+
+       <j:RadioButton text="Disabled">
+               <j:beads>
+                       <j:Disabled/>
+               </j:beads>
+       </j:RadioButton>
+
+       <j:RadioButton text="Set and Disabled" selected="true">
                <j:beads>
                        <j:Disabled/>
                </j:beads>
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/CheckBox.as 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/CheckBox.as
index abf8185..d69fad6 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/CheckBox.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/CheckBox.as
@@ -23,7 +23,6 @@ package org.apache.royale.jewel
 
     COMPILE::JS
     {
-        import org.apache.royale.core.CSSClassList;
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.events.Event;
         import org.apache.royale.html.util.addElementToWrapper;
@@ -114,7 +113,6 @@ package org.apache.royale.jewel
             return element;
         }
 
-        COMPILE::JS
         /**
                 *  override UIBase to affect positioner instead of element
                 *
@@ -123,10 +121,10 @@ package org.apache.royale.jewel
                 *  @playerversion AIR 2.6
                 *  @productversion Royale 0.9.2
                 */
+        COMPILE::JS
                override protected function setClassName(value:String):void
                {
-                       //positioner.className = value;
-            addStyles(positioner, value);
+                       addStyles(positioner, value);
                }
 
         /**
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as
index e77196e..19d5981 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as
@@ -18,96 +18,443 @@
 
////////////////////////////////////////////////////////////////////////////////
 package org.apache.royale.jewel
 {
-    import org.apache.royale.html.RadioButton;
+    import org.apache.royale.events.Event;
+    import org.apache.royale.events.MouseEvent;
 
     COMPILE::SWF
     {
-        import flash.display.DisplayObject;
+        import flash.utils.Dictionary;
+        import org.apache.royale.core.UIButtonBase;
+        import org.apache.royale.core.IStrand;
+        import org.apache.royale.core.IValueToggleButtonModel;
     }
 
     COMPILE::JS
     {
+        import org.apache.royale.core.UIBase;
         import org.apache.royale.core.WrappedHTMLElement;
-        import org.apache.royale.jewel.supportClasses.RadioButtonIcon;
         import org.apache.royale.html.util.addElementToWrapper;
+        import org.apache.royale.utils.cssclasslist.addStyles;
     }
 
+    //--------------------------------------
+    //  Events
+    //--------------------------------------
+
+    /**
+     *  Dispatched when the user clicks on RadioButton.
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.8
+     */
+       [Event(name="click", type="org.apache.royale.events.MouseEvent")]
+
+    /**
+     *  Dispatched when RadioButton is being selected/unselected.
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.8
+     */
+    [Event(name="change", type="org.apache.royale.events.Event")]
+
     /**
-        *  The RadioButton class is a component that displays a selectable 
Button. RadioButtons
-        *  are typically used in groups, identified by the groupName property. 
RadioButton use
-        *  the following beads:
-        *
-        *  org.apache.royale.core.IBeadModel: the data model, which includes 
the groupName.
-        *  org.apache.royale.core.IBeadView:  the bead that constructs the 
visual parts of the RadioButton..
-        *
-        *  @toplevel
-        *  @langversion 3.0
-        *  @playerversion Flash 10.2
-        *  @playerversion AIR 2.6
-        *  @productversion Royale 0.0
-        */
+     *  The Jewel radio button component is an enhanced version of the
+     *  standard HTML <input type="radio">, or "radio button" element. A radio 
button
+     *  consists of a small circle and, typically, text that clearly 
communicates a
+     *  condition that will be set when the user clicks or touches it. Radio 
buttons
+     *  always appear in groups of two or more and, while they can be 
individually
+     *  selected, can only be deselected by selecting a different radio button 
in the
+     *  same group (which deselects all other radio buttons in the group).
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.8
+     */
     COMPILE::SWF
-       public class RadioButton extends org.apache.royale.html.RadioButton
-    {
+       public class RadioButton extends UIButtonBase implements IStrand
+       {
         /**
                 *  constructor.
                 *
                 *  @langversion 3.0
                 *  @playerversion Flash 10.2
                 *  @playerversion AIR 2.6
-                *  @productversion Royale 0.0
+                *  @productversion Royale 0.8
                 */
-               public function RadioButton(upState:DisplayObject=null, 
overState:DisplayObject=null, downState:DisplayObject=null, 
hitTestState:DisplayObject=null)
+               public function RadioButton()
                {
-                       super(upState, overState, downState, hitTestState);
+            super();
+
+            typeNames = "jewel radiobutton";
 
-            typeNames = "jewel radiobutton"
+                       
addEventListener(org.apache.royale.events.MouseEvent.CLICK, 
internalMouseHandler);
                }
-    }
 
+               protected static var dict:Dictionary = new Dictionary(true);
+
+               /**
+                *  The name of the group. Only one RadioButton in a group is 
selected.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.8
+                */
+               public function get groupName() : String
+               {
+                       return IValueToggleButtonModel(model).groupName;
+               }
+               public function set groupName(value:String) : void
+               {
+                       IValueToggleButtonModel(model).groupName = value;
+               }
+
+               /**
+                *  The string used as a label for the RadioButton.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.8
+                */
+               public function get text():String
+               {
+                       return IValueToggleButtonModel(model).text;
+               }
+               public function set text(value:String):void
+               {
+                       IValueToggleButtonModel(model).text = value;
+               }
+
+               /**
+                *  Whether or not the RadioButton instance is selected. 
Setting this property
+                *  causes the currently selected RadioButton in the same group 
to lose the
+                *  selection.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.8
+                */
+               public function get selected():Boolean
+               {
+                       return IValueToggleButtonModel(model).selected;
+               }
+               public function set selected(selValue:Boolean):void
+               {
+                       IValueToggleButtonModel(model).selected = selValue;
+
+                       // if this button is being selected, its value should 
become
+                       // its group's selectedValue
+                       if( selValue ) {
+                               for each(var 
rb:org.apache.royale.jewel.RadioButton in dict)
+                               {
+                                       if( rb.groupName == groupName )
+                                       {
+                                               rb.selectedValue = value;
+                                       }
+                               }
+                       }
+               }
+
+               /**
+                *  The value associated with the RadioButton. For example, 
RadioButtons with labels,
+                *  "Red", "Green", and "Blue" might have the values 0, 1, and 
2 respectively.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.8
+                */
+               public function get value():Object
+               {
+                       return IValueToggleButtonModel(model).value;
+               }
+               public function set value(newValue:Object):void
+               {
+                       IValueToggleButtonModel(model).value = newValue;
+               }
+
+               /**
+                *  The group's currently selected value.
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.8
+                */
+               public function get selectedValue():Object
+               {
+                       return IValueToggleButtonModel(model).selectedValue;
+               }
+               public function set selectedValue(newValue:Object):void
+               {
+                       // a radio button is really selected when its value 
matches that of the group's value
+                       IValueToggleButtonModel(model).selected = (newValue == 
value);
+                       IValueToggleButtonModel(model).selectedValue = newValue;
+               }
+
+               /**
+                * @private
+                */
+               override public function addedToParent():void
+               {
+            super.addedToParent();
+
+            // if this instance is selected, set the local selectedValue to
+                       // this instance's value
+                       if( selected ) selectedValue = value;
+
+                       else {
+
+                               // make sure this button's selectedValue is set 
from its group's selectedValue
+                               // to keep it in sync with the rest of the 
buttons in its group.
+                               for each(var 
rb:org.apache.royale.jewel.RadioButton in dict)
+                               {
+                                       if( rb.groupName == groupName )
+                                       {
+                                               selectedValue = 
rb.selectedValue;
+                                               break;
+                                       }
+                               }
+                       }
+
+                       dict[this] = this;
+               }
+
+               /**
+                * @private
+                */
+               private function internalMouseHandler(event:MouseEvent) : void
+               {
+                       // prevent radiobutton from being turned off by a click
+                       if( !selected ) {
+                               selected = !selected;
+                               dispatchEvent(new Event(Event.CHANGE));
+                       }
+               }
+       }
+    
+    /**
+     *  Dispatched when the user clicks on RadioButton.
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.8
+     */
+    [Event(name="click", type="org.apache.royale.events.MouseEvent")]
+    
+    /**
+     *  Dispatched when RadioButton is being selected/unselected.
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.8
+     */
+    [Event(name="change", type="org.apache.royale.events.Event")]
+    
     COMPILE::JS
-    public class RadioButton extends org.apache.royale.html.RadioButton
+    public class RadioButton extends UIBase
     {
-        public function RadioButton()
+        /**
+         *  Constructor.
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.8
+         */
+               public function RadioButton()
                {
-                       super();
+            super();
 
             typeNames = "jewel radiobutton";
-               }
+        }
 
         /**
-         * @private
-         * 
-         *  @royalesuppresspublicvarwarning
+         * Provides unique name
          */
-        public static var radioCounter:int = 0;
+        protected static var radioCounter:int = 0;
 
-        private var labelFor:HTMLLabelElement;
+        private var radio:HTMLSpanElement;
+        private var icon:HTMLInputElement;
+        private var label:HTMLLabelElement;
         private var textNode:Text;
-        private var icon:RadioButtonIcon;
+
+        COMPILE::JS
+               private var _positioner:WrappedHTMLElement;
+
+               COMPILE::JS
+               override public function get positioner():WrappedHTMLElement
+               {
+                       return _positioner;
+               }
+
+               COMPILE::JS
+               override public function set 
positioner(value:WrappedHTMLElement):void
+               {
+                       _positioner = value;
+               }
 
         /**
          * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
-         * @royaleignorecoercion HTMLInputElement
          * @royaleignorecoercion HTMLLabelElement
+         * @royaleignorecoercion HTMLInputElement
+         * @royaleignorecoercion HTMLSpanElement
          * @royaleignorecoercion Text
          */
         override protected function createElement():WrappedHTMLElement
         {
-            icon = new RadioButtonIcon()
-            icon.id = '_radio_' + 
org.apache.royale.jewel.RadioButton.radioCounter++;
+            var label:HTMLLabelElement = document.createElement('label') as 
HTMLLabelElement;
+            
+            icon = addElementToWrapper(this,'input') as HTMLInputElement;
+            icon.type = "radio";
+            icon.className = 'input';
+            icon.id = '_radio_' + + Math.random();
+            label.appendChild(icon);
 
             textNode = document.createTextNode('') as Text;
 
-            labelFor = addElementToWrapper(this,'label') as HTMLLabelElement;
-            labelFor.appendChild(icon.element);
-            labelFor.appendChild(textNode);
-            icon.element.className = "input";
-            
-            (textNode as WrappedHTMLElement).royale_wrapper = this;
-                       (icon.element as WrappedHTMLElement).royale_wrapper = 
this;
+            radio = document.createElement('span') as HTMLSpanElement;
+            radio.className = 'span';
+            radio.appendChild(textNode);
+            label.appendChild(radio);
+            //radio.addEventListener('mouseover', mouseOverHandler, false);
+            //radio.addEventListener('mouseout', mouseOutHandler, false);
+
+            // (textNode as WrappedHTMLElement).royale_wrapper = this;
+            // (icon as WrappedHTMLElement).royale_wrapper = this;
+            // (radio as WrappedHTMLElement).royale_wrapper = this;
+
+            positioner = label as WrappedHTMLElement;
+            _positioner.royale_wrapper = this;
 
             return element;
         }
+
+        /**
+                *  override UIBase to affect positioner instead of element
+                *
+                *  @langversion 3.0
+                *  @playerversion Flash 10.2
+                *  @playerversion AIR 2.6
+                *  @productversion Royale 0.9.2
+                */
+        COMPILE::JS
+               override protected function setClassName(value:String):void
+               {
+                       addStyles(positioner, value);
+               }
+
+        override public function addEventListener(type:String, 
handler:Function, opt_capture:Boolean = false, opt_handlerScope:Object = 
null):void
+        {
+            if (type == MouseEvent.CLICK)
+            {
+                icon.addEventListener(type, handler, opt_capture);
+            }
+            else
+            {
+               super.addEventListener(type, handler, opt_capture, 
opt_handlerScope);
+            }
+        }
+
+        public function clickHandler(event:Event):void
+        {
+            selected = !selected;
+        }
+        
+        public function get groupName():String
+        {
+            return icon.name as String;
+        }
+
+        public function set groupName(value:String):void
+        {
+            icon.name = value;
+        }
+        
+        public function get text():String
+        {
+            return textNode.nodeValue;
+        }
+        
+        public function set text(value:String):void
+        {
+            textNode.nodeValue = value;
+        }
+        
+        /** @export */
+        public function get selected():Boolean
+        {
+            return icon.checked;
+        }
+
+        public function set selected(value:Boolean):void
+        {
+            if(icon.checked == value)
+                return;
+            var instance:Object = element['MaterialRadio'];
+            if(instance)
+            {
+                if(value)
+                    instance["check"]();
+                else
+                    instance["uncheck"]();
+            }
+            else
+                icon.checked = value;
+            dispatchEvent(new Event(Event.CHANGE));
+        }
+        
+        public function get value():Object
+        {
+            return icon.value;
+        }
+        public function set value(v:Object):void
+        {
+            icon.value = v as String;
+        }
+        
+        public function get selectedValue():Object
+        {
+            var groupName:String = icon.name as String;
+            var buttons:NodeList = document.getElementsByName(groupName);
+            var n:int = buttons.length;
+
+            for (var i:int = 0; i < n; i++)
+            {
+                if (buttons[i].checked)
+                {
+                    return buttons[i].value;
+                }
+            }
+            return null;
+        }
+
+        /**
+         * @royaleignorecoercion HTMLInputElement
+         */
+        public function set selectedValue(value:Object):void
+        {
+            var groupName:String = icon.name as String;
+            var buttons:NodeList = document.getElementsByName(groupName);
+            var n:int = buttons.length;
+
+            for (var i:int = 0; i < n; i++)
+            {
+                if (buttons[i].value === value)
+                {
+                    buttons[i].checked = true;
+                    break;
+                }
+            }
+        }
     }
 }
\ No newline at end of file
diff --git 
a/frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg 
b/frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg
new file mode 100644
index 0000000..07beb17
--- /dev/null
+++ 
b/frameworks/themes/JewelTheme/src/main/resources/assets/radiobutton-circle.svg
@@ -0,0 +1,19 @@
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg";><g 
transform="translate(-616, -350)"><g transform="translate(611, 345)"><g><circle 
cx="11" cy="11" r="6"></circle></g></g></g></svg>
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css 
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 29eb2b3..d39517f 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -245,12 +245,61 @@ span {
 }
 
 .jewel.radiobutton {
-  padding-left: 5px;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  vertical-align: middle;
+  width: 100%;
+  height: 22px;
 }
 .jewel.radiobutton .input {
-  width: 15px;
-  height: 15px;
-  border: 1px solid;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  width: 22px;
+  height: 22px;
+  line-height: 22px;
+  background: linear-gradient(white, #f3f3f3);
+  border: 1px solid #b3b3b3;
+  border-radius: 50%;
+}
+.jewel.radiobutton .input:checked, .jewel.radiobutton .input:checked:active {
+  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' 
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, 
-350)'><g transform='translate(611, 345)'><g><circle fill='#3CADF1' cx='11' 
cy='11' r='6'></circle></g></g></g></svg>");
+  background-repeat: no-repeat;
+  background-size: 60%;
+  background-position: center;
+  background-attachment: fixed;
+}
+.jewel.radiobutton .input:focus {
+  outline: none;
+  border: 1px solid #0f88d1;
+}
+.jewel.radiobutton .input[disabled] {
+  cursor: unset;
+  border: 1px solid #c6c6c6;
+  background: #F9F9F9;
+}
+.jewel.radiobutton .input[disabled]:checked {
+  border: 1px solid #c6c6c6;
+  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' 
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, 
-350)'><g transform='translate(611, 345)'><g><circle fill='lightgray' cx='11' 
cy='11' r='6'></circle></g></g></g></svg>");
+  background-size: 60%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+}
+.jewel.radiobutton .span {
+  cursor: pointer;
+  position: absolute;
+  margin: 0;
+  padding-left: 6px;
+  font-size: 16px;
+  line-height: 22px;
 }
 
 .jewel.slider .slider {
diff --git 
a/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass 
b/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
index 0bba0f1..df3f1ed 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_radiobutton.sass
@@ -17,20 +17,83 @@
 //
 
////////////////////////////////////////////////////////////////////////////////
 
+// Jewel RadioButton
+
+// RadioButton variables
+$radiobutton-button-size: 22px
+$radiobutton-border-radius: 50%
+$radiobutton-label-separation: 6px
+$radiobutton-label-font-size: 16px
+
 .jewel.radiobutton
-    padding-left: 5px
+    //cursor: pointer
+    display: inline-block
+
+    margin: 0
+    padding: 0
+
+    position: relative
+    vertical-align: middle
+    
+    width: 100%
+    height: $radiobutton-button-size
+
+    // -- INPUT
     .input
-        width: 15px
-        height: 15px
-        border: 1px solid
-
-    // > input[type="radio"]
-    //     width: 50px
-    //     height: 50px
-    // > label
-    //     cursor: auto
-    //     position: relative
-    //     display: block
-    //     padding-left: 20px
-    //     outline: none
-        //font-size: @labelFontSize
\ No newline at end of file
+        +appear(none)
+        cursor: pointer
+        display: inline-block
+        
+        margin: 0
+        padding: 0
+        
+        width: $radiobutton-button-size
+        height: $radiobutton-button-size
+
+        line-height: $radiobutton-button-size
+
+        @if $flat
+            border: 0px solid
+            background: $default-color
+        @else
+            background: linear-gradient(lighten($default-color, 15%), 
lighten($default-color, 10%))
+            border: 1px solid darken($default-color, 15%)
+        border-radius: $radiobutton-border-radius
+
+        &:checked,  &:checked:active
+            //background: url(assets/radiobutton-tick.svg), 
lighten($primary-color, 25%)
+            background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 12' 
version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-616, 
-350)'><g transform='translate(611, 345)'><g><circle fill='#{$primary-color}' 
cx='11' cy='11' r='6'></circle></g></g></g></svg>")
+            background-repeat: no-repeat
+            background-size: 60%
+            background-position: center
+            background-attachment: fixed
+            
+        &:focus
+            outline: none
+            @if $flat
+                background: lighten($primary-color, 25%)
+            @else
+                border: 1px solid darken($primary-color, 15%)
+
+        &[disabled]
+            cursor: unset
+            border: 1px solid darken($disabled-color, 20%)
+            background: $disabled-color
+            
+            &:checked
+                border: 1px solid darken($disabled-color, 20%)
+                //background: url(assets/radiobutton-tick.svg), $disabled-color
+                background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 
12' version='1.1' xmlns='http://www.w3.org/2000/svg'><g 
transform='translate(-616, -350)'><g transform='translate(611, 345)'><g><circle 
fill='#{darken($disabled-color, 15%)}' cx='11' cy='11' 
r='6'></circle></g></g></g></svg>")
+                background-size: 60%
+                background-position: center
+                background-repeat: no-repeat
+                background-attachment: fixed
+                
+    // -- LABEL
+    .span
+        cursor: pointer
+        position: absolute
+        margin: 0
+        padding-left: $radiobutton-label-separation
+        font-size: $radiobutton-label-font-size
+        line-height: $radiobutton-button-size

-- 
To stop receiving notification emails like this one, please contact
[email protected].

Reply via email to