You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by Piotr Zarzycki <pi...@gmail.com> on 2018/03/25 16:12:17 UTC
Re: [royale-asjs] branch feature/jewel-ui-set updated: checkbox
mostly done, but needs #35 solved to be finished
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 <ca...@apache.org>:
> 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 <ca...@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+
> 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
> carlosrovira@apache.org.
>
--
Piotr Zarzycki
Patreon: *https://www.patreon.com/piotrzarzycki
<https://www.patreon.com/piotrzarzycki>*