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 95ceb5c initial work on checkbox. get inline svg with color variable substitution 95ceb5c is described below commit 95ceb5c5d988766197547e89a4a360b1fdf1abdc Author: Carlos Rovira <carlosrov...@apache.org> AuthorDate: Sat Mar 24 21:32:37 2018 +0100 initial work on checkbox. get inline svg with color variable substitution --- .../src/main/resources/assets/checkbox-tick.svg | 29 ++++ .../JewelTheme/src/main/resources/defaults.css | 20 +-- .../src/main/sass/components/_checkbox.sass | 150 ++++++++++++++++++++- 3 files changed, 185 insertions(+), 14 deletions(-) diff --git a/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg b/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg new file mode 100644 index 0000000..64606dc --- /dev/null +++ b/frameworks/themes/JewelTheme/src/main/resources/assets/checkbox-tick.svg @@ -0,0 +1,29 @@ +<!-- + + 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" 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 diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css index 22b39bc..789eec4 100644 --- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css +++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css @@ -203,18 +203,18 @@ span { border: 1px solid #3CADF1; border-radius: 3px; } -.jewel.checkbox .input:checked { - border: 3px solid #3CADF1; +.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:active { - border: 4px solid #EF5A2A; +.jewel.checkbox .input:checked path, .jewel.checkbox .input:checked:active path { + fill: #ff0000; } -.jewel.checkbox .input:checked:after { - font-size: 14px; - position: absolute; - top: 0px; - left: 3px; - color: #99a1a7; +.jewel.checkbox .input:focus { + outline: none; + border: 1px solid #0f88d1; } .jewel.checkbox .input[disabled] { cursor: unset; diff --git a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass index 485b972..af39fc9 100644 --- a/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass +++ b/frameworks/themes/JewelTheme/src/main/sass/components/_checkbox.sass @@ -17,14 +17,156 @@ // //////////////////////////////////////////////////////////////////////////////// +// Jewel CheckBox + +// CheckBox variables +$checkbox-label-height: 24px +$checkbox-button-size: 22px + .jewel.checkbox + cursor: pointer + display: inline-block + + margin: 0 + padding: 0 + + position: relative + vertical-align: middle + + box-sizing: border-box + + width: 100% + height: $checkbox-label-height + + // 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 + + 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 + + + //&: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 + + &:focus + outline: none + @if $flat + background: lighten($primary-color, 25%) + @else + border: 1px solid darken($primary-color, 15%) + + &[disabled] + cursor: unset + border: 1px solid darken($disabled-color, 20%) + background: $disabled-color + //box-shadow: none + + // LABEL .span padding-left: 5px - .input - width: 15px - height: 15px - border: 1px solid + + +// [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 -- To stop receiving notification emails like this one, please contact carlosrov...@apache.org.