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 772fb81 checkbox mostly done, but needs #35 solved to be finished
772fb81 is described below
commit 772fb81f1bf24f709cb1ff44e1a6b7b2c313304b
Author: Carlos Rovira <[email protected]>
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
[email protected].
