Hi Carlos, If your commit is related to compiler Issue which is raised there you should pointed use it apache/royale-compiler#35 notation. Now you are pointing to some old issue which is closed in asjs repository.
Thanks, Piotr 2018-03-25 16:41 GMT+02:00 <[email protected]>: > 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+ > CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50 > cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5v > cmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkv > MDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3 > dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9y > Zy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSI [...] > - //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+ > CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50 > cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5v > cmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkv > MDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3 > dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9y > Zy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSA [...] > - //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]. > -- Piotr Zarzycki Patreon: *https://www.patreon.com/piotrzarzycki <https://www.patreon.com/piotrzarzycki>*
