royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] 45/49: checkbox mostly done, but needs #35 solved to be finished
Date Tue, 27 Mar 2018 08:32:40 GMT
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

commit af93c92bd61eb12baac29d142e2208233775b72e
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Sun Mar 25 16:41:45 2018 +0200

    checkbox mostly done, but needs #35 solved to be finished
---
 .../src/main/royale/CheckBoxPlayGround.mxml        |  12 +-
 .../src/main/royale/TextInputPlayGround.mxml       |   2 +-
 .../royale/org/apache/royale/jewel/CheckBox.as     |  43 ++++-
 .../royale/jewel/supportClasses/TextFieldBase.as   | 115 +++++++------
 .../src/main/resources/assets/checkbox-tick.svg    |  12 +-
 .../JewelTheme/src/main/resources/defaults.css     |  40 +++--
 .../src/main/resources/svgs/checkbox-tick.svg      |  43 +++++
 .../src/main/sass/components/_checkbox.sass        | 178 ++++++---------------
 8 files changed, 234 insertions(+), 211 deletions(-)

diff --git a/examples/royale/JewelExample/src/main/royale/CheckBoxPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/CheckBoxPlayGround.mxml
index a26ac6e..5190f82 100644
--- a/examples/royale/JewelExample/src/main/royale/CheckBoxPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/CheckBoxPlayGround.mxml
@@ -29,11 +29,17 @@ limitations under the License.
 	
 	<html:H3 text="Jewel CheckBox"/>
 
-	<j:CheckBox text="Checkbox 1"/>
+	<j:CheckBox text="Not Checkbox"/>
 
-	<j:CheckBox text="Checkbox 2"/>
+	<j:CheckBox text="Checked" selected="true"/>
 
-	<j:CheckBox text="Checkbox Disabled">
+	<j:CheckBox text="Disabled">
+		<j:beads>
+			<j:Disabled/>
+		</j:beads>
+	</j:CheckBox>
+
+	<j:CheckBox text="Checked And Disabled" selected="true">
 		<j:beads>
 			<j:Disabled/>
 		</j:beads>
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index fa64a53..e7538d5 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -43,7 +43,7 @@ limitations under the License.
 		</js:beads>
 		<j:TextField>
 			<j:beads>
-				<js:TextPromptBead prompt="With Placeholder..."/>
+				<js:TextPromptBead prompt="With prompt..."/>
 			</j:beads>
 		</j:TextField>
 		<j:TextButton text="Send" primary="true"/>
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 3eb4807..abf8185 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,10 +23,11 @@ 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;
-        import org.apache.royale.core.CSSClassList;
+        import org.apache.royale.utils.cssclasslist.addStyles;
     }
 
     /**
@@ -69,6 +70,21 @@ package org.apache.royale.jewel
 
         COMPILE::JS
         protected var label:HTMLLabelElement;
+
+        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
@@ -80,9 +96,9 @@ package org.apache.royale.jewel
         COMPILE::JS
         override protected function createElement():WrappedHTMLElement
         {
-            label = addElementToWrapper(this,'label') as HTMLLabelElement;
+            var label:HTMLLabelElement = document.createElement('label') as HTMLLabelElement;
             
-            input = document.createElement('input') as HTMLInputElement;
+            input = addElementToWrapper(this,'input') as HTMLInputElement;
             input.type = 'checkbox';    
             input.className = 'input';
             label.appendChild(input);
@@ -91,11 +107,28 @@ package org.apache.royale.jewel
             checkbox.className = 'span';
             label.appendChild(checkbox);
             
-            (input as WrappedHTMLElement).royale_wrapper = this;
-            (checkbox as WrappedHTMLElement).royale_wrapper = this;
+            positioner = label as WrappedHTMLElement;
+            _positioner.royale_wrapper = this;
+            //(input as WrappedHTMLElement).royale_wrapper = this;
+            //(checkbox as WrappedHTMLElement).royale_wrapper = this;
             return element;
         }
 
+        COMPILE::JS
+        /**
+		 *  override UIBase to affect positioner instead of element
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.2
+		 */
+		override protected function setClassName(value:String):void
+		{
+			//positioner.className = value;
+            addStyles(positioner, value);
+		}
+
         /**
          *  The text label for the CheckBox.
          *
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
index 0a8399e..d478400 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
@@ -53,67 +53,75 @@ package org.apache.royale.jewel.supportClasses
 			super();
 		}
 
+        
         COMPILE::JS
-        {
-            private var _textNode:Text;
-            /**
-             *  @copy org.apache.royale.jewel.supportClasses.ITextField#textNode
-             *
-             *  @langversion 3.0
-             *  @playerversion Flash 10.2
-             *  @playerversion AIR 2.6
-             *  @productversion Royale 0.9.2
-             */
-            public function get textNode():Text
-            {
-                return _textNode;
-            }
+        private var _textNode:Text;
 
-            public function set textNode(value:Text):void
-            {
-                _textNode = value;
-            }
+        /**
+         *  @copy org.apache.royale.jewel.supportClasses.ITextField#textNode
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.2
+         */
+        COMPILE::JS
+        public function get textNode():Text
+        {
+            return _textNode;
+        }
 
-            private var _input:HTMLInputElement;
-            /**
-             *  @copy org.apache.royale.jewel.supportClasses.ITextField#input
-             *
-             *  @langversion 3.0
-             *  @playerversion Flash 10.2
-             *  @playerversion AIR 2.6
-             *  @productversion Royale 0.9.2
-             */
-            public function get input():HTMLInputElement
-            {
-                return _input;
-            }
+        COMPILE::JS
+        public function set textNode(value:Text):void
+        {
+            _textNode = value;
+        }
 
-            public function set input(value:HTMLInputElement):void
-            {
-                _input = value;
-            }
+        COMPILE::JS
+        private var _input:HTMLInputElement;
+        /**
+         *  @copy org.apache.royale.jewel.supportClasses.ITextField#input
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.2
+         */
+        COMPILE::JS
+        public function get input():HTMLInputElement
+        {
+            return _input;
+        }
+        COMPILE::JS
+        public function set input(value:HTMLInputElement):void
+        {
+            _input = value;
+        }
 
-            private var _label:HTMLLabelElement;
-            /**
-             *  @copy org.apache.royale.jewel.supportClasses.ITextField#label
-             *
-             *  @langversion 3.0
-             *  @playerversion Flash 10.2
-             *  @playerversion AIR 2.6
-             *  @productversion Royale 0.9.2
-             */
-            public function get label():HTMLLabelElement
-            {
-                return _label;
-            }
+        COMPILE::JS
+        private var _label:HTMLLabelElement;
 
-            public function set label(value:HTMLLabelElement):void
-            {
-                _label = value;
-            }
+        /**
+         *  @copy org.apache.royale.jewel.supportClasses.ITextField#label
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.2
+         */
+        COMPILE::JS
+        public function get label():HTMLLabelElement
+        {
+            return _label;
         }
 
         COMPILE::JS
+        public function set label(value:HTMLLabelElement):void
+        {
+            _label = value;
+        }
+
+        
         /**
 		 *  override UIBase to affect positioner instead of element
 		 *
@@ -122,12 +130,13 @@ package org.apache.royale.jewel.supportClasses
 		 *  @playerversion AIR 2.6
 		 *  @productversion Royale 0.9.2
 		 */
+        COMPILE::JS
 		override protected function setClassName(value:String):void
 		{
 			//positioner.className = value;
             addStyles(positioner, value);
 		}
-        
+
         private var _isInvalid:Boolean = false;
         /**
 		 *  A boolean flag to activate "is-invalid" effect selector.
diff --git a/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg b/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg
index 64606dc..f95ec08 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg
+++ b/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg
@@ -16,14 +16,4 @@
   limitations under the License.
 
 -->
-<svg viewBox="0 0 16 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g transform="translate(-763.000000, -350.000000)" fill="#777777">
-            <g transform="translate(760.000000, 345.000000)">
-                <g>
-                    <polygon points="3 13 9 18 19 7 16 5 9 13 6 10"></polygon>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
+<svg viewBox="0 0 16 13" version="1.1" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-763,
-290)"><g transform="translate(760, 285)"><g><polygon points="3 13 9 18
19 7 16 5 9 13 6 10"></polygon></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 789eec4..29eb2b3 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -182,35 +182,36 @@ span {
 }
 
 .jewel.checkbox {
-  cursor: pointer;
   display: inline-block;
   margin: 0;
   padding: 0;
   position: relative;
   vertical-align: middle;
-  box-sizing: border-box;
   width: 100%;
-  height: 24px;
+  height: 22px;
 }
 .jewel.checkbox .input {
   -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: 24px;
-  border: 1px solid #3CADF1;
+  line-height: 22px;
+  background: linear-gradient(white, #f3f3f3);
+  border: 1px solid #b3b3b3;
   border-radius: 3px;
 }
 .jewel.checkbox .input:checked, .jewel.checkbox .input:checked:active {
-  border: 1px solid #0f88d1;
-  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'><g stroke='none' stroke-width='1' fill='none'
fill-rule='evenodd'><g transform='translate(-763.000000, -350.000000)' fill='#3CADF1'><g
transform='translate(760.000000, 345.000000)'><g><polygon id='Tick' points='3
13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></g></g></svg>");
-  background-size: cover;
-  padding: 2px;
-}
-.jewel.checkbox .input:checked path, .jewel.checkbox .input:checked:active path {
-  fill: #ff0000;
+  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g
transform='translate(-763, -290)'><g transform='translate(760, 285)'><g><polygon
fill='#3CADF1' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></g></svg>");
+  background-repeat: no-repeat;
+  background-size: 90%;
+  background-position: center;
+  background-attachment: fixed;
 }
 .jewel.checkbox .input:focus {
   outline: none;
@@ -221,8 +222,21 @@ span {
   border: 1px solid #c6c6c6;
   background: #F9F9F9;
 }
+.jewel.checkbox .input[disabled]:checked {
+  border: 1px solid #c6c6c6;
+  background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g
transform='translate(-763, -290)'><g transform='translate(760, 285)'><g><polygon
fill='lightgray' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></g></svg>");
+  background-size: 90%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+}
 .jewel.checkbox .span {
-  padding-left: 5px;
+  cursor: pointer;
+  position: absolute;
+  margin: 0;
+  padding-left: 6px;
+  font-size: 16px;
+  line-height: 22px;
 }
 
 .jewel.label {
diff --git a/frameworks/themes/JewelTheme/src/main/resources/svgs/checkbox-tick.svg b/frameworks/themes/JewelTheme/src/main/resources/svgs/checkbox-tick.svg
new file mode 100644
index 0000000..e4d5091
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/svgs/checkbox-tick.svg
@@ -0,0 +1,43 @@
+<!--
+
+  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 16 13' preserveAspectRatio='xMinYMid' version='1.1' xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'>
+    <g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>
+        <g transform='translate(-763.000000, -350.000000)' fill='#777777'>
+            <g transform='translate(760.000000, 345.000000)'>
+                <g>
+                    <polygon points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
+
+
+<svg viewBox='0 0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
+    <g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>
+        <g transform='translate(-763.000000, -290.000000)'>
+            <g transform='translate(760.000000, 285.000000)'>
+                <g>
+                    <rect id='Bounds' x='0' y='0' width='22' height='22'></rect>
+                    <polygon fill='#777777' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
index af39fc9..d1ab54c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass
@@ -20,11 +20,13 @@
 // Jewel CheckBox
 
 // CheckBox variables
-$checkbox-label-height: 24px
 $checkbox-button-size: 22px
+$checkbox-border-radius: 3px
+$checkbox-label-separation: 6px
+$checkbox-label-font-size: 16px
 
 .jewel.checkbox
-    cursor: pointer
+    //cursor: pointer
     display: inline-block
 
     margin: 0
@@ -33,59 +35,46 @@ $checkbox-button-size: 22px
     position: relative
     vertical-align: middle
     
-    box-sizing: border-box
-    
     width: 100%
-    height: $checkbox-label-height
+    height: $checkbox-button-size
 
-    // INPUT
+    // -- INPUT
     .input
         +appear(none)
-        // position: absolute
-        // cursor: pointer
-        // overflow: hidden
-        // display: inline-block
-
-        // box-sizing: border-box
-        // margin: 0
-        // top: 0//$checkbox-top-offset
-        // left: 0
-
+        cursor: pointer
+        display: inline-block
+        
+        margin: 0
+        padding: 0
+        
         width: $checkbox-button-size
         height: $checkbox-button-size
 
-        line-height: $checkbox-label-height
-        
-        border: 1px solid $primary-color
-        border-radius: 3px
-
-        &:checked,  &:checked:active
-            @if $flat
-                background: lighten($primary-color, 25%)
-            @else
-                border: 1px solid darken($primary-color, 15%)
-                //background: url(assets/checkbox-tick.svg)
-                background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1'
xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g stroke='none'
stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(-763.000000,
-350.000000)' fill='#{$primary-color}'><g transform='translate(760.000000, 345.000000)'><g><polygon
id='Tick' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></g></g></svg>")
-                background-size: cover
-                padding: 2px
-
-            & path
-                fill: #ff0000
+        line-height: $checkbox-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: $checkbox-border-radius
 
-        //&:checked:after
-            //content: url(assets/jewel-button.svg)
-            //background: #3f51b5 url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSI
[...]
-            //background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24"><path d="M22 2v20h-20v-20h20zm2-2h-24v24h24v-24zm-6
16.538l-4.592-4.548 4.546-4.587-1.416-1.403-4.545 4.589-4.588-4.543-1.405 1.405 4.593 4.552-4.547
4.592 1.405 1.405 4.555-4.596 4.591 4.55 1.403-1.416z"/></svg>')
-            //background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'
width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop
offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)'
x='0' y='0' width='100%' height='100%'/></svg>")
-            //background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSA
[...]
-            //content: url(assets/jewel-button.svg)
-            //font-size: 14px
-            //position: absolute
-            //top: 0px
-            //left: 3px
-            //color: #99a1a7
-
+        &:checked,  &:checked:active
+            //background: url(assets/checkbox-tick.svg), lighten($primary-color, 25%)
+            background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1'
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760,
285)'><g><polygon fill='#{$primary-color}' points='3 13 9 18 19 7 16 5 9 13 6
10'></polygon></g></g></g></svg>")
+            background-repeat: no-repeat
+            background-size: 90%
+            background-position: center
+            background-attachment: fixed
+            //z-index: -10
+            //box-shadow: inset 0px 0px 0px 3px $disabled-color
+            //fill: $primary-color
+            // @if $flat
+            //     background: lighten($primary-color, 25%)
+            // @else
+            //     border: 1px solid darken($primary-color, 15%)
+            
         &:focus
             outline: none
             @if $flat
@@ -97,84 +86,23 @@ $checkbox-button-size: 22px
             cursor: unset
             border: 1px solid darken($disabled-color, 20%)
             background: $disabled-color
-            //box-shadow: none
+            
+            &:checked
+                border: 1px solid darken($disabled-color, 20%)
+                //background: url(assets/checkbox-tick.svg), $disabled-color
+                background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 16 13' version='1.1'
xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763, -290)'><g transform='translate(760,
285)'><g><polygon fill='#{darken($disabled-color, 15%)}' points='3 13 9 18 19
7 16 5 9 13 6 10'></polygon></g></g></g></svg>")
+                background-size: 90%
+                background-position: center
+                background-repeat: no-repeat
+                background-attachment: fixed
+                //background: $disabled-color url(data:image/svg+xml;utf8,<svg viewBox='0
0 16 13' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-763,
-290)'><g transform='translate(760, 285)'><g><polygon fill='#{darken($disabled-color,
15%)}' points='3 13 9 18 19 7 16 5 9 13 6 10'></polygon></g></g></g></svg>)
no-repeat fixed center/90%
+                //background: $disabled-color
     
-    // LABEL
+    // -- LABEL
     .span
-        padding-left: 5px
-    
-
-// [type="checkbox"]:not(:checked) + label,
-// [type="checkbox"]:checked + label {
-//     position: relative;
-//     padding-left: 32px;
-//     margin-bottom: 4px;
-//     display: inline-block;
-//     font-size: 16px;
-// }
-// /* checkbox aspect */
-// [type="checkbox"]:not(:checked) + label:before,
-// [type="checkbox"]:checked + label:before {
-//     content: '';
-//     position: absolute;
-//     left: 0px; top: 0px;
-//     width: 22px; height: 22px;
-//     border: 2px solid #cccccc;
-//     background: #ffffff;
-//     border-radius: 4px;
-//     box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
-// }
-// /* checked mark aspect */
-// [type="checkbox"]:not(:checked) + label:after,
-// [type="checkbox"]:checked + label:after {
-//     content: '✔';
-//     position: absolute;
-//     top: 0px; left: 5px;
-//     font-size: 20px;
-//     line-height: 1.2;
-//     color: #09ad7e;
-//     transition: all .2s;
-// }
-// /* checked mark aspect changes */
-// [type="checkbox"]:not(:checked) + label:after {
-//     opacity: 0;
-//     transform: scale(0);
-// }
-// [type="checkbox"]:checked + label:after {
-//     opacity: 1;
-//     transform: scale(1);
-// }
-// /* disabled checkbox */
-// [type="checkbox"]:disabled:not(:checked) + label:before,
-// [type="checkbox"]:disabled:checked + label:before {
-//     box-shadow: none;
-//     border-color: #999999;
-//     background-color: #dddddd;
-// }
-// [type="checkbox"]:disabled:checked + label:after {
-//     color: #999999;
-// }
-// [type="checkbox"]:disabled + label {
-//     color: #aaaaaa;
-// }
-// /* accessibility */
-// [type="checkbox"]:checked:focus + label:before,
-// [type="checkbox"]:not(:checked):focus + label:before {
-//     border: 2px dotted #0000ff;
-// }
-// /* hover style just for information */
-// label:hover:before {
-//     border: 2px solid #4778d9!important;
-//     background: #ffffff
-
-
-    // > input[type="checkbox"]
-    //     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
+        cursor: pointer
+        position: absolute
+        margin: 0
+        padding-left: $checkbox-label-separation
+        font-size: $checkbox-label-font-size
+        line-height: $checkbox-button-size

-- 
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.

Mime
View raw message