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 <[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].
